index.html

--- layout: single property_name: animation-fill-mode ---<section id="animation-fill-mode" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-fill-mode/" data-property-name="animation-fill-mode" 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-fill-mode">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-fill-mode"><span>#</span>animation-fill-mode</a></h2><div class="property-description"><p>Defines what happens <strong>before</strong> an animation starts and <strong>after</strong> it ends. The fill mode allows to tell the browser if the animation’s styles should also be applied <em>outside</em> of the animation.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-fill-mode"></a></div></header><style type="text/css">.animation-fill-mode { animation-delay: 1s;animation-duration: 2s;animation-iteration-count: 1;animation-name: kf-animation-fill-mode;animation-play-state: paused; }</style><style type="text/css">.animation-fill-mode.is-animated { animation-play-state: running; }</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-fill-mode: none;">animation-fill-mode: none;</code></p><div class="example-description"><p>The <em>animation</em> styles do not affect the <em>default</em> style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.</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-fill-mode square square--pink" id="animation-fill-mode-none">Hello<br>World</div></div></aside><style type="text/css">#animation-fill-mode-none{ animation-fill-mode:none;}</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-fill-mode: forwards;">animation-fill-mode: forwards;</code></p><div class="example-description"><p>The last styles applied at the end of the animation are retained <em>afterwards</em>.</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-fill-mode square square--pink" id="animation-fill-mode-forwards">Hello<br>World</div></div></aside><style type="text/css">#animation-fill-mode-forwards{ animation-fill-mode:forwards;}</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-fill-mode: backwards;">animation-fill-mode: backwards;</code></p><div class="example-description"><p>The animation&#39;s styles will already be applied <em>before</em> the animation actually starts.</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-fill-mode square square--pink" id="animation-fill-mode-backwards">Hello<br>World</div></div></aside><style type="text/css">#animation-fill-mode-backwards{ animation-fill-mode:backwards;}</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-fill-mode: both;">animation-fill-mode: both;</code></p><div class="example-description"><p>The styles are applied <em>before</em> and <em>after</em> the animation plays.</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-fill-mode square square--pink" id="animation-fill-mode-both">Hello<br>World</div></div></aside><style type="text/css">#animation-fill-mode-both{ animation-fill-mode:both;}</style></section></section>