O'Reilly logo

HTML5 and CSS3 Transition, Transformation, and Animation by Gianluca Guarini, Aravind Shenoy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS3 animation

In transition, we have seen the change from one state to another. However, it doesn't fit the bill when it comes to multiple states. Hence, the animation feature is used for this purpose.

Let's discuss the various properties of CSS3 animations, and then we will incorporate all of that in a code to understand it better.

@keyframes

The points at which the transition should take place can be defined using the @keyframes property. As of now, we need to add a vendor prefix to the @keyframes property as it is still in its development state. In future, when it is accepted as a standard, then we do not have to use a vendor prefix. We can use percentage or from and to keywords to implement the change in state from one CSS style to another. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required