Revision 1046734 of @keyframes

<div>{{CSSRef}} {{ SeeCompatTable }}</div>

<h2 id="Summary">Summary</h2>

<p>The <strong><code>@keyframes</code></strong> CSS <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> 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'd get when letting the browser handle everything automatically.</p>

<p>The <code>@keyframes</code> at-rule can be accessed via the CSS object model interface {{domxref("CSSKeyframesRule")}}.</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>

<h3 id="Valid_keyframe_lists">Valid keyframe lists</h3>

<p>In order for a keyframe list to be valid, it must include rules for at least the times <code>0%</code> (or <code>from</code>) and <code>100%</code> (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; as such, it will be ignored by the parser&nbsp;and can't be used for animation.</p>

<p>If you include properties that can't be animated in your keyframe rules&nbsp;they get ignored, but supported properties will still be animated.</p>

<h3 id="Duplicate_resolution">Duplicate resolution</h3>

<p>If multiple keyframe sets exist for a given name, the last one encountered by the parser is used. <code>@keyframes</code> rules don't cascade, so animations never derive 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 id="When_properties_are_left_out_of_some_keyframes">When properties are left out of some keyframes</h3>

<p>Properties that aren't specified in every&nbsp;keyframe are interpolated (excepting those that can't be interpolated, which are dropped from the animation entirely). For example:</p>

<pre class="brush: css">
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}
</pre>

<p>Here, the {{ cssxref("top") }} property animates using the <code>0%</code>, <code>30%</code>, and <code>100%</code> keyframes, and {{ cssxref("left") }} animates using the <code>0%</code>, <code>68%</code>, and <code>100%</code> keyframes.</p>

<p>Only properties that are specified in both the <code>0%</code> and <code>100%</code> keyframes will be animated; any property not included in both of those keyframes will retain their starting value for the duration of the animation sequence.</p>

<h3 id="When_a_keyframe_is_defined_multiple_times">When a keyframe is defined multiple times</h3>

<p>The specification defines that if a keyframe is defined multiple times but not all properties affected are specified in each keyframe, only the values specified in the latest keyframe are considered. For example:</p>

<pre class="brush: css">
@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}
</pre>

<p>In this example, at the <code>50%</code> keyframe, the value used is <code>top: 10px</code> and all other values at this keyframe are ignored.</p>

<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }}&nbsp; Cascading keyframes are supported starting in Firefox 14. For the example above, it means that at the&nbsp;<code style="font-style: normal;">50%</code>&nbsp;keyframe, the value&nbsp;<code style="font-style: normal;">left: 20px</code>&nbsp;will be considered. This is not defined in the specification yet, but it is being discussed.</p>

<h3 id="!important_in_a_keyframe">!important in a keyframe</h3>

<p>Declarations in a keyframe that are qualified with <code>!important</code> are ignored</p>

<pre class="brush: css">
@keyframes important1 {
&nbsp; from { margin-top: 50px; }
&nbsp; 50%&nbsp; { margin-top: 150px !important; } /* ignored */
&nbsp; to&nbsp;&nbsp; { margin-top: 100px; }
}

@keyframes important2 {
  from { margin-top: 50px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 100px; }
&nbsp; to&nbsp;&nbsp; { margin-top: 150px !important; /* ignored */
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 50px; }
}
</pre>

<h2 id="Syntax">Syntax</h2>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;identifier&gt;</code></dt>
 <dd>A name identifying the keyframe list. This must match the identifier production in CSS syntax.</dd>
 <dt><code>from</code></dt>
 <dd>A starting offset of <code>0%</code>.</dd>
 <dt><code>to</code></dt>
 <dd>An ending offset of <code>100%</code>.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>A percentage of the time through the animation sequence at which the specified keyframe should occur.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<p>See <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> for examples.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td>
   <td>{{ Spec2('CSS3 Animations') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>

<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>
    <p>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br />
     43.0</p>
   </td>
   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br />
    {{ CompatGeckoDesktop("16.0") }}</td>
   <td>10</td>
   <td>12 {{ property_prefix("-o") }}<br />
    12.10 <a href="https://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="https://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
   <td>4.0{{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td>ignore <code>!important</code> declarations</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(19)}}</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>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br />
    {{ CompatGeckoMobile("16.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>ignore <code>!important</code> declarations</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(19)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Notes">Notes</h2>

<ol>
 <li>@keyframes not supported in an inline or scoped stylesheet in Firefox &nbsp;({{bug(830056)}}).</li>
</ol>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
 <li>{{domxref("AnimationEvent")}}</li>
</ul>