@keyframes CSS At-Rule

Description

The @keyframes CSS at- rule sets keyframes when animating an element. The key frame is the properties of the element (transparency, color, position, etc.), which should be applied to the element at a given point in time. Thus, the animation is a smooth transition of style properties from one key frame to another. The browser takes over the calculation of intermediate values ​​between such frames.

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>

Values

  • <custom-ident>A name identifying the keyframe list. This must match the identifier production in CSS syntax.
  • fromA starting offset of 0%.
  • toAn ending offset of 100%.
  • <percentage>A percentage of the time through the animation sequence at which the specified keyframe should occur.

Example

@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1012????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????