@keyframes

  • Revision slug: CSS/@keyframes
  • Revision title: @keyframes
  • Revision id: 22061
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 2 words added, 4 words removed

Revision Content

{{ CSSRef() }}

{{ draft() }}

Summary

@keyframes lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.

To use keyframes, you create a @keyframes rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe list. Each @keyframes rule contains a style list of keyframe selectors, each of which is comprised of a percentage along the animation at which the keyframe occurs as well as a block containing the style information for that keyframe.

You can list the keyframes in any order; they will be handled in the order in which their specified percentages indicate they should occur.

Valid keyframe lists

In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.

If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.

Duplicate resolution

If multiple keyframe sets exist for a given name, the last one encountered is used. @keyframes rules don't cascade, so animations never drive keyframes from more than one rule set.

If a given animation time offset is duplicated, the last keyframe in the @keyframes rule for that percentage is used for that frame. There's no cascading within a @keyframes rule if multiple keyframes specify the same percentage values.

Syntax

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

Values

<identifier>
A name identifying the keyframe list.
from
A starting offset of 0%.
to
An ending offset of 100%.
{{ xref_csspercentage() }}
A percentage of the time through the animation sequence at which the specified keyframe should occur.

Examples

 

Notes

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatUnknown() }}

{{ CompatGeckoDesktop("5.0") }}

(as -moz-animation)

{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ draft() }}</p>
<h3>Summary</h3>
<p><code>@keyframes </code>lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.</p>
<p>To use keyframes, you create a <code>@keyframes</code> rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe list. Each <code>@keyframes</code> rule contains a style list of keyframe selectors, each of which is comprised of a percentage along the animation at which the keyframe occurs as well as a block containing the style information for that keyframe.</p>
<p>You can list the keyframes in any order; they will be handled in the order in which their specified percentages indicate they should occur.</p>
<h4>Valid keyframe lists</h4>
<p>In order for a keyframe list to be valid, it must include rules for at least the times 0% (or <code>from</code>) and 100% (or <code>to</code>) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.</p>
<p>If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.</p>
<h4>Duplicate resolution</h4>
<p>If multiple keyframe sets exist for a given name, the last one encountered is used. <code>@keyframes</code> rules don't cascade, so animations never drive keyframes from more than one rule set.</p>
<p>If a given animation time offset is duplicated, the last keyframe in the <code>@keyframes</code> rule for that percentage is used for that frame. There's no cascading within a <code>@keyframes</code> rule if multiple keyframes specify the same percentage values.</p>
<h3>Syntax</h3>
<pre>@keyframes &lt;identifier&gt; {
  [ [ from | to | &lt;percentage&gt; ] [, from | to | &lt;percentage&gt; ]* block ]*
}
</pre>
<h3>Values</h3>
<dl> <dt><code>&lt;identifier&gt;</code></dt> <dd>A name identifying the keyframe list.</dd> <dt><code>from</code></dt> <dd>A starting offset of 0%.</dd> <dt><code>to</code></dt> <dd>An ending offset of 100%.</dd> <dt>{{ xref_csspercentage() }}</dt> <dd>A percentage of the time through the animation sequence at which the specified keyframe should occur.</dd>
</dl><h3>Examples</h3>
<p> </p>
<h3>Notes</h3>
<h3>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td> <p>{{ CompatGeckoDesktop("5.0") }}</p> <p>(as <code>-moz-animation</code>)</p> </td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
<h2>Specifications</h2>
</div>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-animations" title="http://www.w3.org/TR/css3-animations">CSS Animations Module Level 3</a></li>
</ul>
Revert to this revision