creating CSS3 animations

Introduction
In the last posts we have shown how to create some animation using CSS3 transitions (to make buttons that animate moving object or to create an animated slider). Transitions are triggered in Javascript by a timer or by some action handler (eg. "onclick") that apply some change (change left or change CSS class) and the change will be animated.

In this post we will show how to create animations, just animations! For example one might need to animate an bouncing arrow next to some button or pulse current tab in menu.

How To ?
First you create a CSS selector (eg. a class called "bounce" or "animate_me"), then we need to pick a name for your animation let's say "bounce"

.bounce { 
animation-name: bounce;
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-ms-animation-name: bounce;
-o-animation-name: bounce;
}

and then specify all animation factors you want like

• animation-duration in seconds
• iteration-count: 1 or 2 or infinite
• animation-direction: normal or alternate (from start to end then from end to start)
• animation-timing-function: eg. linear, eaze, eaze-in-out, cubic-bezier(A,B,C,D)

Note: All above are prefixed with browser specific prefix like "-moz" or "-webkit" ..etc
Here is some full example

.bounce { 
 -webkit-animation-name: bounce;
 -moz-animation-name: bounce;
 -webkit-animation-duration: 0.5s;
 -moz-animation-duration: 0.5s;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -moz-animation-direction: alternate;
 -webkit-animation-timing-function: eaze-in-out;
 -moz-animation-timing-function: eaze-in-out;
}

Now all you have to do is to specify what is the start of the animation and what is the end for the animation name you declared in the previous section like this

 @-webkit-keyframes bounce {
  from { left: 0px; }
  to { left: 100px; }
 }

You might as well specify every single step in the animation using % instead of from/to like this:

@-moz-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}
@-webkit-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}

Live Examples:
Here are 3 live examples

• a ball moving from left to right
• an arrow bouncing below an entry box
• a ball moving around

the last one gives something like this