Animation is the process of displaying still images or object in rapid sequence to create the illusion of movement. The images can be hand drawn, computer generated or picture.
CSS 3 Animation
We can apply the animation on many content of our web page using CSS3 without using help of script or any animation software . We can change many CSS properties as you want, as many time you want. This reduces the HTTP request for page take minimum time on load.
Browser Support for CSS 3 Animations:
Prefix
We can apply the animation on older browsers by using these prefixes.
- -webkit- For Google Chrome, Safari
- -moz- Firefox
- -o- Opera
- -ms- Internet Explorer
Keyframes
To use Css3 animation, we must specify the keyframes for animation in css styles as:
@keyframes
According to keyframes the animation gradually will change from current style to new styles at certain time. In other words we can set the animation as:
Animation Starts Animation Ends
First keyframe → Last keyframe
We can set the keyframes in % (0% to 100%) in desired steps. Or we can set the animation in from-to (from –where animation gets start & to – where animation reach to end).
Animation Properties
There are eight types of animation in CSS 3 :
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Animation-name
This specify the name of the animation to keyframes .
Example :
.move
{
animation-name: myfirstanimation;
}
// where .move is selector name which is going to animate,
// myfirstanimation is name of the animation
Animation-duration
The animation duration property defines that how many seconds or milliseconds animation will complete one cycle of animation.
This is most important property of the animation. If animation duration is not specified to animation, the animation will not work because its default duration is 0 (zero) in seconds.
Example :
.move
{
animation-duration: 2s;
}
// where .move is selector name which is going to animate,
// 2s sets 2 seconds time to complete the cycle of animation.
Animation-timing-function
It set the effect of appearance for the animation. The property values are:
- Ease: It start the animation slow and then fast in middle and then slow at last. This the default value of animation.
- Linear: It has same speed of animation from start to end.
- Ease In: It start animation slow and increase the speed of the animation till end.
- Ease Out: It has fast start of animation and then slow.
- Ease-in-out: It has slow start and end of the animation.
- Cubic-bezier: Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.
Animation-delay:
We can set the delay in animation by using animation-delay.
Example :
.move
{
animation-duration: 2s;
animation-delay:1s;
}
// where .move is selector name which is going to animate,
// 2s sets 2 seconds time to complete the cycle of animation.
// 1s is delay in animation.
The completion time of animation is 2 seconds but due to delay it will start after 1s due to delay time is set.
Animation-iteration-count:
It sets the how many times the animation will play . The property value are shown below :
Number : We can set by number 1, 2 or any. That means the animation will play according to set time.
- Infinite: The animation will play continuously.
- Initial: Sets this property to its default value.
Example 1:
.move
{
animation-duration: 2s;
animation-iteration-count:5;
}
// where .move is selector name which is going to animate,
// 2s sets 2 seconds time to complete the cycle of animation.
// 5 is for animation will play only 5 times and then stops.
Example 2:
.move
{
animation-duration: 2s;
animation-iteration-count:infinite;
}
// where .move is selector name which is going to animate,
// 2s sets 2 seconds time to complete the cycle of animation.
// infinite is for the animation will play continuously for ever.
Animation-Fill-Mode :
Default animation play cycle is 1, we can change it by selecting iteration count property like set numbers of animation play. At the end of animation it reverts back to first keyframe. We can control this default condition by using the value of animation-fill-mode property like:
- Animation-fill-mode: forward or animation-fill-mode: backwards.
- animation-fill-mode: forwards;
By using this can stop the animation on last frame, just like a pause on last frame.
Animation-Play-State:
This property is set to stop or run when you want. The default value of animation play-state: running. But we can stop the animation before completion of its cycle by using:
- animation-play-state: paused;
Example
.move
{
animation-name:myfirstanimation;
animation-duration: 2s
}
.move:hover
{
animation-play-state:paused;
}
