Menu
Im trying to create an animation for a "help window". I would like it to start or have the the image/animation after X seconds, but am having issues as the animation-delay property isn't applicable here as it pauses the still image before playing it.
Any ideas for webkits or properties to try here?
See link here; http://hardystewartdesign.com/dist/project.html
.hello {
width: 211px;
height: 115px;
background: none;
position: fixed;
bottom: 0px;
left: 0px;
-webkit-animation: mymove 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: mymove 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: -300px;}
to {left: 0px;}
}
@keyframes mymove {
from {left: -300px;}
to {left: 0;}
}
877
CSS Animation Delay Syntax The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes. animation-name.
Let's start by creating a CSS animation. CSS animations are defined by keyframes. You can name your animation anything you want. I've defined an animation where the element will grow wide and then tall. Once your keyframes are defined, you can use the animation on an element by setting the animation-name property to the name of your keyframes.
It is used to define a time before the animation starts. The value passed is in seconds or ms as well as animation-duration, and in the shorthand form of writing is always considered the value in seconds/ms that comes after the animation-duration time. e.g. animation: rotate 2s 1s;
With CSS animations (ala @keyframes) it’s not as easy as you might think to “restart” it. Let’s say you set it to run once: You have that run on, say, your logo: Then for some reason you want to have that animation run again, perhaps on a click. You might think CSS provides a way to kick it off again, but as far as I know it doesn’t.
If your animation only has one step, such as fading an element's opacity from 0 to 1, you can use a CSS transition instead of a CSS animation. The method is essentially the same.
just change left: 0 to left: -300px in the .hello class
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
