@keyframes - At-rule CSS

Description of the @keyframes at-rule.

@keyframes defines the name and parameters of an animation: which CSS property(ies) are animated, the segments of the animation, etc.

The animation defined by @keyframes will then be applied to an element via the CSS properties animation or animation-name.

If two animations are defined with the same name, the last one is used: there are no cascading priority rules like with properties. This makes sense since no selector appears in the syntax of @keyframes.

For a more general presentation of CSS animations, refer to the page on animations in CSS. Also, see the following properties, which are the bare minimum needed to create an animation:

Syntaxes of the @keyframes at-rule.

• @keyframes demo { from {prop1:valeur; prop2:valeur;...} 30% {prop1:valeur; prop2:valeur;...} ... to {prop1:valeur; prop2:valeur;...} }

  The name chosen for the animation comes immediately after the word @keyframes. In this example, the chosen name is demo. It must follow these rules:

  • The name can optionally be specified in quotes or apostrophes, but it is not mandatory.
  • Case is taken into account. It is recommended to adopt a naming convention such as kebab-case to remain consistent with the usual CSS syntax: all lowercase with a dash between words. Examples: animation-menu, rotate-logo, etc.
  • It must not have any spaces. The only characters allowed are letters, numbers, hyphens and underscores.
  • It must not start with a double dash.
  • The name must not be inherit, unset, or initial. In fact, it is recommended to avoid any name that would have any meaning in CSS, if only for readability reasons.

  Each step of the animation can be introduced by a percentage or by the words from (equivalent to 0%) and to (equivalent to 100%).
  Note that the % sign is required even with the value 0%.
  If two percentages are identical, the last one is the one that is taken into account, but the directive @keyframes is not invalid.

  If only the from or 0% step is set, the browser finishes the animation with the current property values. Similarly, if only the final step is set (to or 100%), the browser starts the animation with the current property values.

  The properties that can be animated include most CSS properties that accept numeric or color values. Properties that only accept discrete values (such as float, font-family, etc.) can still be animated, but the transition will occur abruptly between the starting value and the ending value. A few rare properties cannot be animated, meaning they will be ignored if mentioned in the @keyframes directive.

  If one of the properties mentioned in the animation is otherwise defined with !important, the animation is not applied to that property. On the other hand, the word !important is forbidden in the @keyframes directive: the corresponding property is ignored.

• @keyframes demo { from { prop1:valeur; prop2:valeur; animation-timing-function: linear; } 30% { prop1:valeur; prop2:valeur; animation-timing-function: ease-out; } ... to { prop1:valeur; prop2:valeur; } }

  In this second syntax example, animation-timing-function sets the animation dynamics for each segment. This dynamic will be used until the next segment.
  On the last segment (to or 100%), animation-timing-function is ignored, even if specified.

  Refer to the animation-timing-function property for more details on this concept of motion.

Animation examples.

Apply multiple animations to elements.

In this example, two animations have been defined:

• A simple rotation applied to the square block.
• A path around a square perimeter, applied to the blue chip.

The third example combines these two animations. Note that there is another way to combine multiple animations: by applying them to the same element. See the property animation-composition for more information.

Using animation-timing-function in @keyframes.

Finally, here is another example using different dynamics for each stage of the animation: the first stage (scaling from 0% to 50%) is done in jerks, while the shrinking (from 50% to 100%) is done linearly.

Manipulates the @keyframes at-rule programmatically.

Using Javascript to add a directive @keyframes.

The principle is to create a style element in the head section. The CSS code corresponding to the definition of @keyframes is inserted into this new element.
The first two lines of our JavaScript example remove, if necessary, a style element created by a previous execution of the code.

let oldStyle=document.getElementById('style1'); try{document.head.removeChild(oldStyle);} catch(e){} const newStyle = document.createElement('style'); newStyle.id='style1'; newStyle.innerHTML = '@keyframes demo {from {color:red;} to {color:blue;}}'; document.head.appendChild(newStyle);

And with JQuery.

$('#style1').remove(); $('<style>', { id: 'style1', html: '@keyframes demo {from {color:red;} to {color:blue;}}' }).appendTo('head');

Browsers compatibility with the @keyframes at-rule.

CSS animations, and therefore the @keyframes directive, are well recognized by browsers.

1

Animations
support

2

@keyframes
at-rule

Estimated overall support.

97%

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Evolution of the @keyframes directive.

• CSS Animations Level 1

  First presentation of animations in CSS.
  Introduction of the @keyframes at-rule.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  No change to the @keyframes at-rule.
  

  March 02, 2023

  Working Draft.

  

  

  

See also, regarding the animations.

Everything related to animations is described in the specification CSS Animations.
Here is a list of the main terms presented in this specification module:

Properties:

At-rules: