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">Link</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>