CSS3 revolutionized animation in web development. Earlier, creating animations required animated images, plugins such as Flash, or some heavy scripting. Although jQuery and other supporting libraries made it a bit easier for developers to create animations with JavaScript, still it cannot compete with the performance capability that the CSS animations offer. Basically, an animation defines an effect that allows an element to change one or many styles, such as color, size, position, opacity, and others, within a time frame. Also, with CSS3 animations, you can allow multiple intermediate changes in styles during the animation itself, other than the ones specified at the beginning and end of the animation.

In order to create an animation, you will need the @keyframe CSS rule, which is used to specify the styles that will be changed during the animation. The following is the code snippet that creates a @keyframe rule named demo and changes the background color from red to yellow, and halfway through, at 50percent, it changes the opacity to zero:

@keyframes demo {
  from { background: red;    }
  50% { opacity: 0;         }
  to { background: yellow; }
}

Afterwards, we bind the animation that is defined in the @keyframe rule to the element (or the selector) we want the effect applied to. Left alone without being attached to any element, the animation will not be applied anywhere. We will need to specify at least two animation properties when binding the animation to a selector:

For example:

#logo { animation: demo 4s }

The preceding example binds the animation named demo that we created using the @keyframe rule, with a duration of 4 seconds, to the element with ID #logo.

Animations are triggered automatically as soon as they are defined in the DOM. You can specify a certain delay time to avoid that, or you can trigger the animation by code. The animation has six major properties as shown below:

div {
  animation-name: demo;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 3s;
  animation-iteration-count: 2;
  animation-direction: normal;
}

Or we can use the animation shorthand property by which we can combine all of these properties into a single line:

div { animation: demo 3s ease-in 3s 2 normal; }

Developers are still a bit hesitant to use CSS3 animations, or any other HTML5 feature for that matter, due to browser support. In order to address this problem of browser compatibility, some style rules had to be defined with vendor-prefixes. For example, an animation definition would be duplicated to support other browsers, each with its own vendor prefixes as follows:

-webkit-animation: 5s linear 2s infinite alternate;
-moz-animation: 5s linear 2s infinite alternate;
-o-animation: 5s linear 2s infinite alternate;
animation: 5s linear 2s infinite alternate;

But when developing for Windows 8, you can reduce it to one, which is the standard. Worrying about multi-browser support is the least of your concerns as Windows 8 supports all the standards that work for Internet Explorer 10.

Another advantage of CSS3 is the concept of 2D and 3D transforms, which enables you to manipulate the elements in your app in a way that was not possible using CSS. It enables you to create rotation, scaling, skewing, and translation of HTML elements in 2D and, newly, in 3D space without the need for a plugin or scripts, defined by the W3C under the CSS transforms specification.

Transforms are created using the transform property, which holds a list of transform functions to be applied to the specified element. The property value can be set to one or more (space-delimited) transform functions, which will be applied in the order they are listed. Following is a sample code of the transform property that applies the rotate function:

div { transform: rotate(90deg) translateX(100px); }

The result of the preceding transform property is that the element is rotated 90 degrees and then translated (moved) 100 px horizontally to the right.

The list of functions available for the transform property includes matrix(), matrix3d(), perspective(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), skew(), skewX(), skewY(), translate(), translate3d(), translateX(), translateY(), and translateZ(). These functions are provided with the CSS3 IntelliSense features in Visual Studio; thus, when writing a transform property, you will be prompted to choose one of those functions.