CSS Animation - A short hand property
Animation property adds animations within a page. We use keyframes and a keyframe represents different CSS properties at different time intervals.
These properties represent the name of keyframe, the duration of animation, the easiness of animation, animation infinite or finite iterations, the direction of animation, state of animation whether it is running or not, and how much delayed the animation should be?
Syntax
It is a short hand property of all individual animation properties such as animation name, duration, timing-function, iteration-count, direction, play-state, delay and fill-mode.
<style>
div{
animation: moveBox 8s 1s infinite alternate;
}
</style>See the above given syntax. We crack this syntax.
- animation-name: moveBox; (the name of keyframe)
- animation-duration: 8s;
- animation-timing-function: ease; (default)
- animation-delay: 1s; (default)
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-fill-mode: none; (default)
- animation-play-state: running; (default)
If the name of animation does not match with any of the values of individual properties, it can be placed anywhere in the animation definition. In the above example, moveBox is the name of animation that does not match with any of the values of other individual properties.
Value
The order of values of individual properties is important within animation definition. The order of values has been given below.
Animation = duration || timing-function || delay || iteration-count || direction || fill-mode || play-state || keyframe-name or none
Order within definition
The first value that is parsed as time must be considered animation-duration and the second value of that is parsed as time must be considered animation-delay.
The order is also important to distinguish keyframe-name values from other keywords that are valid values for properties other than animation-name. The valid values that are found first must be accepted for properties other than animation-name and must not be considered as animation-name value. See the example given below to understand.
For example, animation: 3s none backwards; means animation-duration is 3s, animation-fill-mode is none and animation-name is backwards. And animation: 3s backwards; where animation-duration is 3s, animation-fill-mode is backwards and animation-name is none.
Default value
It is evaluated on the basis of initial values of individual properties.
Applicable to
It is applicable to all of the elements including ::before and ::after pseudo elements.
Browser support
We need to add specific prefixes before animation property to work on different browsers.
-webkit- must be added before animation properties to work on Safari.
-moz- must be added before animation properties to work on Firefox.
-o- must be added before animation properties to work on Opera.
And -ms- is prefixed with animation to work on Internet Explorer.
Sometimes a designer faces the issues even after using these prefixes for different browsers. To solve this problem a generic animation property should be used at the end. See the example given below.
<style>
-webkit-animation:rotate 2s 1;
-moz-animation: rotate 2s 1;
-ms-animation: rotate 2s 1;
-o-animation: rotate 2s 1;
animation: rotate 2s 1;
</style>In the above example, 2s is the duration of animation. 1 is the number of iterations. And rotate is the name of animation.
CSS animation examples
There are various examples of animation. we have css animation examples that are very interesting.
Was this article helpful?
