@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
10	12	43	16	30	9
Tablets / Mobile
43	43	16	30	9	4.0

Last updated by CSSPortal on: 1st December 2019