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 - 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
-
-
-
-
CSS keyframe animation fundamentals3m 55s
-
(Locked)
animation-delay and animation-fill-mode2m 20s
-
(Locked)
A closer look at animation-fill-mode2m 34s
-
(Locked)
animation-direction3m 18s
-
(Locked)
Timing functions and easing7m 48s
-
(Locked)
The steps() timing function4m 44s
-
(Locked)
Challenge: Adding keyframes to an animation39s
-
(Locked)
Solution: Adding keyframes to an animation58s
-
-
-
-
-
-