@keyframes CSS At-Rule

Description

The CSS @keyframes at-rule is used to define the steps of a CSS animation. It is used in conjunction with the animation property to create animations such as fading in or out, moving, or changing color.

To use @keyframes, you first need to define a keyframe rule. This is done by specifying a name for the animation and then a list of CSS properties and values that should be applied at different points in the animation. The keyframes can be defined in any order, but they will be played back in the order they are listed.

Once you have defined the keyframe rule, you can then apply it to an element using the animation property. The animation property takes the name of the keyframe rule as its value. You can also use the animation property to specify other details about the animation, such as its duration, timing function, and number of iterations.

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

The following table will show you the current browser support for the at-rule @keyframes.

Desktop

12	43	16	30	9

Tablets / Mobile

43	16	30	9	4	43

Last updated by CSSPortal on: 30th September 2023

Support Us