In the last two articles, we learned about animations in CSS and various ways to customize them with the help of iterations and Animation delays. Now in today's article, we are going to learn more about them so that to customize them even more. Let's begin...
Reverse Directions and Alternate Cycles
The animation-direction property in CSS decides whether we want to play animation forward, backward or in alternate cycles. Following values are possible:
- normal - This is the default. Animation plays as normal(forward).
- reverse - The animation plays in reverse direction that is backward.
- alternate - The animation first plays forward and then backward.
- alternate-reverse - The animation first plays backward and then forward.
Speed Curve of Animation
Just like we used various ways to customize transitions in CSS some articles before, same functions can be used to change the speed of the animation. The animation-timing-function property specifies the speed curve of the animation. Following values are possible for this property:
- ease - This is the default value. In this transition starts effect starts slowly, then fast and ends with Slow again.
- linear - In this transition maintains same speed though start to end.
- ease-in - Transition with slow start
- ease-out - Transition with slow end
- ease-in-out - Transition with a slow start and slow end
- cubic-bezier(n,n,n,n)- This transition let us define our own values for cubic bezier function
Fill Mode of Animations
As we have seen already, the animations do not affect elements before the first keyframe is played or after the last keyframe is played. The animation-fill-mode can override this. Following values are possible for this property:
- none - This is the default. The animation will not apply any styles before or after the execution.
- forwards - The element will retrain values set by the last keyframe of animation.
- backwards - The element will get styles that are specified by the first keyframe of animation.
- both - Both the forward and backward extensions.
Animation Shorthand
Nothing new, but way to write six different properties of the animation in one line. The six properties in the sequence are:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
Use them in a single line of property animation as follows:
div {
animation: myAnimation 4s ease-in 3s infinite alternate-reverse;
}
That's all for today. Here we complete animation part in CSS.
#keepCoding
#keepCoding
