A great way to put some animation effects on specified element is CSS3 animation. 1. @keyframes
@keyframes allows us to divide animation in frames. Without keyframe
animation won't work. You can specify initial and final property by using
percentage or using keywords like “from”, “to”.
@keyframe value_of_animation_name_property{
from{}
to{}
}
2. Animation properties :
- Animation-name.
- Animation-duration.
- Animation-timing-function.
- Animation-delay.
- Animation-iteration-count.
- Animation-direction.
- Animation-play-state.
Animation-name :
With the help of Animation
name property you can specify the name to the animation. It helps you
to create unique identity of specified animation effect. Animation-name
will be used in the syntax of @keyframes.
Example. animation-name : sushrut;
Animation-duration :
This property represents the duration of the animation. The value of this property is generally written in seconds or milliseconds.
Example. animation-duration: 3s;
Animation-timing-function :
Sometimes animation varies speed from between its stars to end. To control its speed Animation-timing-function is used.
Example: animation-timing-function: ease-in;
Animation-timing-function values.
- Linear: Maintains same speed thoughout animation
- Ease: Start with fast speed and ends with slow speed.
- Ease-in: Start with slow speed and ends with fast speed.
- Ease-out: Looks same as Ease.
- Ease-in-out: Start with slow, increases speed at middle and ends with slow speed.
Animation-delay :
It represents the speed of the animation. The value of this property is
generally written in seconds or milliseconds. More seconds means more
delay.
Example. animation-delay: 3s;
Animation-iteration-count :
Animation-iteration-count represents the frequency of the animation.
Example. animation-iteration-count: 5;
Animation-direction :
Animation-direction defines normal and reverse direction.
Example: Animation direction: alternate;
Animation direction values.
normal: Animation
will work normally. Animation will start from starting frame and ends
with ending frame. Again start with starting frame and so on.
reverse: Animation
will be reverse. Animation will start from ending frame and ends with
starting frame. Again start with ending frame and so on.
alternate: Animation
will start from starting frame and ends with ending frame. Then start
with ending frame and ends with starting frame and so on
alternate-reverse:
Animation will start from ending frame and ends with starting frame.
Then start with starting frame and ends with ending frame and so on.
Animation-play-state :
Animation-play-state values helps to decide whether the animation should keep running or pause. Default value is running.
Example: animation-play-state: paused;
Animation compatibility extension according to browser.
If you have read the following example, you will see that, I have added same code twice and added webkit
extension in one of them. Why I have done that? Because I want,
animation should work for all browsers. If I run the code without using webkit, then animation will not work on Google Chrome, Opera and Safari. Animation will work on Mozilla Firefox.
