Animation direction and fill-mode
Learn animation-direction and animation-fill-mode properties.
What is animation-direction?
animation-direction sets which way the animation plays. The default is normal: it plays from start to end. reverse plays it backward; the last step comes first, the first step comes last.
alternate plays the first round forward and the second round backward. In continuous loops it produces a back-and-forth motion; alternate-reverse starts with the reverse. A swinging bell uses alternate to swing back and forth.
What is animation-fill-mode?
animation-fill-mode decides what state the element keeps before the animation starts and after it ends. The default is none; the element returns to its original state.
With forwards the element stays on the last step after the animation ends; with backwards it takes the first step before it starts; both does the two together. A menu that should stay open after opening uses forwards.
Exercise Add direction and fill-mode to the bell and menu
The .bell should swing back and forth: animation-direction: alternate. The .menu should stay open after opening: animation-fill-mode: forwards. Add the matching declaration to each element.
Show example solution
/* swinging bell */
.bell {
animation-name: swing;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* opening menu */
.menu {
animation-name: open;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}Test yourself
-
Which direction for a bell that swings back and forth?
.bell { animation-name: swing; animation-duration: 0.6s; animation-iteration-count: infinite; animation-direction: ???; }- normal
- alternate
- reverse
- alternate-reverse
Show answer
alternate — Correct. alternate plays one round forward, one round backward.
-
Keep the final state
.menu { animation-name: open; animation-fill-mode: ____; }Show answer
.menu { animation-name: open; animation-fill-mode: forwards; } -
Match each value to its behavior
- normal
- Start to end
- reverse
- End to start
- alternate
- Forward-back loop
- forwards
- Stay at end
-
What does animation-fill-mode: forwards do?
.menu { animation-name: open; animation-duration: 0.4s; animation-fill-mode: forwards; }- Keeps the last step after the animation ends
- Slows the animation down
- Plays the animation backward
- Repeats the animation
Show answer
Keeps the last step after the animation ends — Correct. forwards freezes the element on the last step.