---
title: '@keyframes'
slug: Web/CSS/@keyframes
translation_of: Web/CSS/@keyframes
---
<p>{{CSSRef}}</p>

<p><span class="seoSummary">The <strong><code>@keyframes</code></strong> CSS <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.</span> This gives more control over the intermediate steps of the animation sequence than <a href="/en-US/docs/Web/CSS/CSS_Transitions">transitions</a>.</p>

<pre class="brush: css no-line-numbers">@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}</pre>

<p>JavaScript can access the <code>@keyframes</code> at-rule with the CSS object model interface {{domxref("CSSKeyframesRule")}}.</p>

<p>To use keyframes, 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 declaration. Each <code>@keyframes</code> rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.</p>

<p>You can list the keyframe percentages in any order; they will be handled in the order they should occur.</p>

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

<p>If a keyframe rule doesn't specify the start or end states of the animation (that is, <code>0%</code>/<code>from</code> and <code>100%</code>/<code>to</code>, browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.</p>

<p>Properties that can't be animated in keyframe rules are ignored, but supported properties will still be animated.</p>

<h3 id="Resolving_duplicates">Resolving duplicates</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 keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. 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>

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

<p>If a keyframe is defined multiple times but not all affected properties are 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") }} Cascading keyframes are supported starting in Firefox 14. For the example above, it means that at the <code>50%</code> keyframe, the value <code>left: 20px</code> will be considered. This is not defined in the specification yet, but it is being discussed.</p>

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

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

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

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

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

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

<dl>
 <dt>{{cssxref("custom-ident")}}</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-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using 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> </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>Edge</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>{{CompatVersionUnknown}}</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="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
   <td>
    <p>4.0{{ property_prefix("-webkit") }}<br>
     9.0 <a href="https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW35" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></p>
   </td>
  </tr>
  <tr>
   <td>ignore <code>!important</code> declarations</td>
   <td>{{CompatUnknown}}</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>Edge</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>{{CompatVersionUnknown}}</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>{{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><code>@keyframes</code> unsupported in scoped stylesheets in Firefox ({{bug(830056)}}).</li>
</ol>

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

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
 <li>{{domxref("AnimationEvent")}}</li>
</ul>