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.

Next lesson: Summary - Loader animation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies