From the course: CSS: Animation

Unlock the full course today

Join today to access over 24,600 courses taught by industry experts.

A closer look at animation-fill-mode

A closer look at animation-fill-mode - CSS Tutorial

From the course: CSS: Animation

A closer look at animation-fill-mode

- [Instructor] Animation-film-mode is a very useful property for CSS animation, but it can be a bit confusing at first. The way I like to think of it is that the animation-film-mode property determines how the time around an animation is filled in. Animation-film-mode is set to none by default, which is why you might notice that certain CSS animations like this one here, jump back to their starting position after an animation that moves them somewhere else has completed. The key frames behind that robot animation, tell it to start from where it is and to move 900 pixels to the right. But once it finishes playing, the robot goes right back to where it was and that feels really weird at first. I mean, we just told that to go over there, but now it went back here, and you might notice a similar behavior during animation delays like we saw in the last video. The reason for all this is that CSS animations are temporal in…

Contents