CSS @keyframes

CSS @keyframes

CSS @keyframes property is used for animations.

It controls the movements, by specifying the keyframe styles, during animations.

Inorder to use it, add @keyframes rule, followed by an animation name.

If there are more than one keyframe exists, the last declared keyframe will be used.


@keyframes keyframe-name 
  from {
  to {

To support animation and @keyframes property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.


Try Yourself