index.html

--- layout: single property_name: animation-direction ---<section id="animation-direction" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-direction/" data-property-name="animation-direction" 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-direction">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-direction" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-direction"><span>#</span>animation-direction</a></h2><div class="property-description"><p>Defines in which direction the animation is played.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-direction"></a></div></header><style type="text/css">.animation-direction { animation-duration: 2s;animation-iteration-count: infinite; }</style><style type="text/css">.animation-direction.is-animated { animation-name: fadeAndMove; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="animation-direction: normal;">animation-direction: normal;</code></p><div class="example-description"><p>The animation is played <strong>forwards</strong>. When it reaches the end, it starts over at the first keyframe.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div animation-direction square square--plum" id="animation-direction-normal">Hello<br>World</div></div></aside><style type="text/css">#animation-direction-normal{ animation-direction:normal;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="animation-direction: reverse;">animation-direction: reverse;</code></p><div class="example-description"><p>The animation is played <strong>backwards</strong>: begins at the last keyframe, finishes at the first keyframe.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div animation-direction square square--plum" id="animation-direction-reverse">Hello<br>World</div></div></aside><style type="text/css">#animation-direction-reverse{ animation-direction:reverse;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="animation-direction: alternate;">animation-direction: alternate;</code></p><div class="example-description"><p>The animation is played <strong>forwards</strong> first, then <strong>backwards</strong>:</p><ul><li>starts at the first keyframe</li><li>stops at the last keyframe</li><li>starts again, but at the last keyframe</li><li>stops at the first keyframe</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div animation-direction square square--plum" id="animation-direction-alternate">Hello<br>World</div></div></aside><style type="text/css">#animation-direction-alternate{ animation-direction:alternate;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="animation-direction: alternate-reverse;">animation-direction: alternate-reverse;</code></p><div class="example-description"><p>The animation is played <strong>backwards</strong> first, then <strong>forwards</strong>:</p><ul><li>starts at the last keyframe</li><li>stops at the first keyframe</li><li>starts again, but at the first keyframe</li><li>stops at the last keyframe</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div animation-direction square square--plum" id="animation-direction-alternate-reverse">Hello<br>World</div></div></aside><style type="text/css">#animation-direction-alternate-reverse{ animation-direction:alternate-reverse;}</style></section></section>