CSS Animation Properties
- @keyframes Allows you to set a timeline for transitions
- animation-name Give a name to an animation, so you can apply it to different elements.
- animation-durationHow long will it take for the animation to complete?
- animation-delay Wait a certain amount of time before starting the animation.
- animation-iteration-count How many times should an animation repeat? It can be infinite.
- animation-direction You can make an animation run forwards, backwards or alternate between the two.
- animation-timing-function You can add easing to these animations.
- animation-fill-mode specifies a style for the target element when the animation is not playing.
- animation Shorthand property
You can find out more about each of these properties on the MDN. We will build a few examples below to test it out.
Example 1
Notice in the keyframes, I have to use the left property for both the from and to keyframes, rather than specifying right: 0.
Example 2
Notice the use of percentages in the keyframes for this one. What happens if you add some different easing? What happens if you remove 'forwards'?
Example 3
To solve the easing across the whole animation, each segment gets an animation timing function. Working with the perspective is challenging. I had to work on each segment one at a time to get the effect I wanted.