CSS3 ANIMATION

CSS3 Animation Properties

Animation must be bind to a selector type by specifying at least these two properties:

•  animation-name
•  animation-duration

The following table lists the @keyframes rule and all the animation properties:

NOTE: Beside the required animation-name and animation-duration properties, two other animation properties that are good to assign is animation-timing-function (or easing) which determine how the speed is DISTRIBUTED across the animation (i.e. fast to slow, slow to fast, etc.)
There are two major ways of defining easing:

1. Predefined key words include:

• ease—is the default if no value is set and is similar to the ease-in-out.
• linear—constant speed
• ease-in—start slow and speed up
• ease-out— start fast and then slow down
• ease-in-out— starts slow, speed up and then slows down again.
• inherit—
• linear—
• step-end step-start—
• !important) —

2. The second way to define easing is to use the easing function (i.e., cubic-bezier(x1, y1, x2, y2)). The easing keywords are actually shortcuts of Bezier curves as such you can define you own. Go to http://www.cubic-bezier.com/  to define your own and then copy and paste the code into your project.
-webkit-animation-timing-function: cubic-bezier (.53, 1.46, 1,-0.49);
Ceaser is another tool that can be used that is located at http://mathewlein.com/ceaser/
The second is the animation-iteration-count which determines how many times the animation will play. The default is 1 if it is not defined.

• A number (i.e., 1, 2, etc.)
• infinite—loop repeatedly
• inherit—
• !important—

NOTE: Two additional properties are animation-delay (how long the animation will delay before starting in units of second or milliseconds) and animation-fill-mode. Normally, the animation will move back to its original position, to prevent this set the animation-fill-mode.

• None—is the default if you don’t declare it.
• Forward—the object will maintain the CSS property from the LAST executed keyframe after the animation has finished which in the case of the from/to keywords this would be the “to” key frame.
• Backward—the object will animate to the FIRST keyframe which in the case of the from/to keywords this would be the “from” keyframe.
• Both—the object will APPLY BOTH the forward and backward behaviors where the CCS properties are applied before and after the animation.

The final two properties that you may want to set is the animation-direction for each iteration:

• Normal – this is the default if none is set.  Animation will play from the to/from key frames or the zero to 100 percent. The keyframes will play in the order created.
• Reverse – reverse the animation.  In essence, the last keyframe will play first and the first last. This is from the 100% to zero percent keyframes or from the “from” keyframe to the “to” keyframe.
• Alternate—will start normal and then reverse.  Alternate can only be used if the animation has an iteration-count larger than one. Because it will first play forward and then in reverse.
• Alternate reverse—will first reverse the direction of the animation and then alternate