Web Design : All about CSS 3 animation

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.

See this example.

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.

More information and example.

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.

Live example 

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;

Live example

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.

Regards : Web Designing company