CSS animation explained in details
As normal animations, CSS animations are controlled or defined using set of keyframes that define the behavior of entire animation.
CSS animations are controlled by eight properties, which are:
Eight properties that control CSS animation
- animation-name: this is used to specify the name that is given to the set of keyframes that used to control the animation. This can be a single name or multiple names separated by comma.
- animation-duration: this property is used to specify the time that the entire animation will use to run one complete animation cycle.
- animation-timing-function: this property is the same as transition-timing-function. This property is used to tell the browser on how to animate the properties changed during the animation.
- animation-iterator-count: this property is used to specify how many times the animation cycle need to run. The property can take two values. Either a number or infinite keyword, which means the animation will run continuously without stopping.
- animation-direction: this property is used to specify where the animation should start its next animation cycle. When the value is alternate, the animation will start where the last cycle end, and when the value is normal, the animation will always start playing at the beginning of animation.
- animation-play-state: this property is used to specify the state of the animation. When the value is set to running, this means the animation is playing, and when the value is set to paused, this means the animation is not playing.
- animation-delay: this property specifies the time that animation should wait before start playing.
- animation-fill-mode: define what values are applied by the animation before the animation starts and after it ends.
CSS animation shorthand syntax
All these properties can be introduced into a CSS selector via a CSS animation shorthand syntax, which uses the keyword animation followed by all the above mentioned animation properties in a specific order.
Animation shorthand needs to be in this order. Example:
- animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode
How to define CSS animation keyframes
Animation keyframe is a block of code that is used to control the animation. The anatomy of keyframe is the @ symbol followed by the word keyframes and then followed by the name that will be used to referrer to the keyframe later in the animation-name property.
There are two types of CSS animation keyframes. The one that uses from and to keywords to control animation properties, and the other that uses percentage.
The percentage keyframe is more flexible than the one that uses from and to keywords. In percentage keyframe we can define custom stopping points by defining our own percentages points, which is not possible in from and to syntax.
CSS animation in action
In this example we are going to create an animation that change the width of the div and its background color.
//usage of animation keyframe
animation: my_animation 3s ease-in infinite alternate both;
In this example we use the shorthand syntax of CSS animation.
Note: something to note about CSS animation is when you want to use multiple animation on the same element you can't use the shorthand syntax.
You need to use the full properties syntax and separate any property value with comma, if animation don't share the same property value.
animation-name: my_anime1, my_anime2;
animation-duration: 2s, 3s;
Here we define two animations my_anime1 and my_anime2. These animations share the same timing function, iteration-count, animation-direction, and animation-fill-mode, but if you look closely you can see we have provided a comma separated list for animation duration. This is because each animation has its own animation duration.
Read about CSS transform here
Read about CSS transition here