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.

Syntax

@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.

Example

Try Yourself