Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Animation direction: animation-direction, step 2
The animation-direction
property has two more values. They are used when the animation playback count animation-iteration-count
is greater than one. And they both define the alternating animation duration.
If the alternate
value is used, odd runs will be direct and even ones will be reversed.
.element {
animation-name: move;
animation-duration: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
}
In our example, the animation move
will be played twice: first forwards (odd run), then in reverse (even run).
If the alternate-reverse
value is used, odd runs will be reversed and even ones will be played forwards.
Let’s see how it works in an example.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments