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


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.


We need @-o-keyframes for Opera, @-moz-keyframes for Firefox and @-webkit-keyframes for Webkit browsers like Safari and Chrome.


Now we can use our @keyframes for animations


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