Animations

CSS3 Animations are similar to CSS3 Transitions in that they smoothly animate a CSS value over time. The differences are (a) how one specifies the properties to animation, (b) how one triggers the animation and (c) the complexity of the animation possible.
You define animations using a CSS “keyframes” at-rule. A simple keyframes rule that matches the fade out behavior of the transition above would be:

@keyframes fadeOut {

from {

opacity: 1;

}

to {

opacity: 0;

}

}

We apply this to our image with this CSS:

img {

animation-duration: 2s;

animation-delay: 0s;

animation-timing-function: linear;

animation-fill-mode: forwards;

}

img:hover {

animation-name: fadeOut;

}

Many of these properties are familiar from our discussion of transitions. The new ones are:

• animation-fill-mode – the “forwards” value of this property means to maintain the “to” property values from the end of the animation going forward in time. The default value of this property is “none,” which causes the properties to return to their non-animated values at the end of the animation. (It’s possible to construct the CSS above without using animation-fill-mode. Simply add “opacity: 0;” to the img:hover rule to maintain the ending opacity at 0.)
• animation-name – setting the animation-name property triggers the animation. When the animation-name property is set, the animation-delay time starts counting down. When animation-delay reaches zero, the animation begins and continues for the animation-duration. The animation-timing-function behaves the same as the transition-timing-function described above.

The power of CSS3 Animations lies in the ability to specify multiple keyframes with properties and intermediate values that don’t have to stay within the bounds of the start and end values. In CSS3 Transitions, intermediate values always progress from the start to the end; they will never go outside that range. Animations do not have that restriction.
This makes it possible to program a “bounce” such as shown in the markup and example below.

#bouncingImage {

width: 400px;

height: 267px;

box-shadow: 2px 2px 5px 0px gray;

animation-duration: 2s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

#bouncingImage:hover {

animation-name: zoomInBounce;

}

@keyframes zoomInBounce {

from {

transform: scale(1);

}

30% {

transform: scale(1.4);

}

40% {

transform: scale(1.15);

}

50% {

transform: scale(1.35);

}

60% {

transform: scale(1.2);

}

70% {

transform: scale(1.3);

}

80% {

transform: scale(1.225);

}

90% {

transform: scale(1.275);

}

to {

transform: scale(1.25);

}

}

Move your mouse over the image to zoom it with a bounce effect.
CSS3 Animations are supported by your browser with -moz-animation.

An interactive demo of CSS3 Animations is available on the IE Test Drive site. The demo works in all browsers that support CSS3 Animations, including IE10 in the Windows Developer Preview.