@keyframes

Structure

@keyframes name-of-animation { keyframes-selector {css-styles;} }

Description

With @keyframes we define animations in CSS which we then can include with animation:;. The animations simply switch from one set of CSS-styles to another.

@keyframe selectors

0% defines CSS rules for the beginning of an animation, 100% defines CSS rules for the end. Instead of 0% and 100% the keywords from and to can be used. You can also specify styles for other parts of the animation - we can use 0-100%. For example 50% would add styles when half the animation is done.

Defining styles

Inside the @keyframe selectors we can add any styles we want. It works like "normal" CSS.

Examples

Now we can use our @keyframes for animations

Compatibility

Chrome	Firefox	Internet Explorer	Opera	Safari
4.0+	5.0+	10.0+	12.0+	4.0+