index.html

---
layout: single
property_name: animation
---

<section id="animation" class="property property--shorthand">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/animation/" data-property-name="animation" data-tooltip="Single page for this property" target="_blank">Pop out</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="{{site.url}}/#animation"><span>#</span>animation</a>
    </h2>
    <div class="property-description">
      <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-name" data-property-name="animation-name">animation-name</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-duration" data-property-name="animation-duration">animation-duration</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-timing-function" data-property-name="animation-timing-function">animation-timing-function</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-delay" data-property-name="animation-delay">animation-delay</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-iteration-count" data-property-name="animation-iteration-count">animation-iteration-count</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-direction" data-property-name="animation-direction">animation-direction</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-fill-mode" data-property-name="animation-fill-mode">animation-fill-mode</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/#animation-play-state" data-property-name="animation-play-state">animation-play-state</a></code>.</p>
<p>Only <code>animation-duration</code> and <code>animation-name</code> are <strong>required</strong>.</p>

    </div>

  </header>






</section>