HTML and CSS Reference
In-Depth Information
first define a duration. So, the second time value that's seen will always represent delay,
whereas the first will always represent duration. This animation includes a small one-
second delay to account for the time it might take for the page to finish loading.
This is the number of times we want the animation to play. The default is 1 , and we've
defined it explicitly in our example, even though we didn't have to.
The animation-direction property defines whether we want the animation to play for-
wards or backwards. We've chosen normal —the default value, which means it will
only play forwards. You can also define it with a value of reverse (to play it back-
wards), alternate (which alternates forwards then backwards each time the anima-
tion plays), and alternate-reverse (which starts playing it backwards on the first
iteration, then alternates from there).
The fill mode for the animation can be forwards , backwards , both , or none (the
default). This tells the browser what styles to apply to the element after the animation
completes. With a value of none or backwards , for example, our logo would fly in
from the left, then, after it finishes, disappear to get back to where it started. We want it
to finish with the styles that end the animation, so we define it as forwards .
Knowing all these details, we can choose to write our animation styles using longhand, like
.logo {
animation-name: logomove;
animation-duration: 2s
animation-timing-function: ease-out;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
Search WWH ::

Custom Search