keyframes

The @keyframes rule controls the intermediate steps in the CSS animation sequence by defining styles for keyframes of the animation sequence. This gives more control over the intermediate stages of the animation sequence than transitions.

Syntax

@keyframes keyframes-name {
  keyframe-block-list
}

where 
keyframes-name = custom-ident | string
keyframe-block-list = keyframe-block+

where 
keyframe-block = keyframe-selector# {
  declaration-list
}

where 
keyframe-selector = from | to | percentage