animations.html

<section id="animation-delay" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-delay/" data-property-name="animation-delay" 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-delay">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-delay" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-delay"><span>#</span>animation-delay</a></h2><div class="property-description"><p>Defines how long the animation has to wait before <strong>starting</strong>. The animation will only be delayed on its <em>first</em> iteration.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-delay"></a></div></header><style type="text/css">.animation-delay { animation-duration: 5s;animation-iteration-count: infinite; }</style><style type="text/css">.animation-delay.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-delay: 0s;">animation-delay: 0s;</code></p><div class="example-description"><p>The animation will wait <strong>zero seconds</strong>, and thus start right away.</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-delay square square--plum" id="animation-delay-0s">Hello<br>World</div></div></aside><style type="text/css">#animation-delay-0s{ animation-delay:0s;}</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-delay: 1.2s;">animation-delay: 1.2s;</code></p><div class="example-description"><p>You can use <strong>decimal</strong> values in <strong>seconds</strong> with the keyword <code>s</code>.</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-delay square square--plum" id="animation-delay-12s">Hello<br>World</div></div></aside><style type="text/css">#animation-delay-12s{ animation-delay:1.2s;}</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-delay: 2400ms;">animation-delay: 2400ms;</code></p><div class="example-description"><p>You can use <strong>milliseconds</strong> instead of seconds, with the keyword <code>ms</code>.</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-delay square square--plum" id="animation-delay-2400ms">Hello<br>World</div></div></aside><style type="text/css">#animation-delay-2400ms{ animation-delay:2400ms;}</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-delay: -500ms;">animation-delay: -500ms;</code></p><div class="example-description"><p>You can use <strong>negative values</strong>: the animation will start as if it had <em>already been playing</em> for <code>500ms</code>.</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-delay square square--plum" id="animation-delay--500ms">Hello<br>World</div></div></aside><style type="text/css">#animation-delay--500ms{ animation-delay:-500ms;}</style></section></section><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><section id="animation-duration" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-duration/" data-property-name="animation-duration" 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-duration">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-duration" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-duration"><span>#</span>animation-duration</a></h2><div class="property-description"><p>Defines how long the animation lasts.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-duration"></a></div></header><style type="text/css">.animation-duration { animation-iteration-count: infinite; }</style><style type="text/css">.animation-duration.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-duration: 0s;">animation-duration: 0s;</code></p><div class="example-description"><p>The default value is <strong>zero seconds</strong>: the animation will simply not play.</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-duration square square--plum" id="animation-duration-0s">Hello<br>World</div></div></aside><style type="text/css">#animation-duration-0s{ animation-duration:0s;}</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-duration: 1.2s;">animation-duration: 1.2s;</code></p><div class="example-description"><p>You can use <strong>decimal</strong> values in <strong>seconds</strong> with the keyword <code>s</code>.</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-duration square square--plum" id="animation-duration-12s">Hello<br>World</div></div></aside><style type="text/css">#animation-duration-12s{ animation-duration:1.2s;}</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-duration: 2400ms;">animation-duration: 2400ms;</code></p><div class="example-description"><p>You can use <strong>milliseconds</strong> instead of seconds, with the keyword <code>ms</code>.</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-duration square square--plum" id="animation-duration-2400ms">Hello<br>World</div></div></aside><style type="text/css">#animation-duration-2400ms{ animation-duration:2400ms;}</style></section></section><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><section id="animation-iteration-count" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-iteration-count/" data-property-name="animation-iteration-count" 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-iteration-count">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-iteration-count"><span>#</span>animation-iteration-count</a></h2><div class="property-description"><p>Defines how many times the animation is played.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-iteration-count"></a></div></header><style type="text/css">.animation-iteration-count { animation-duration: 2s; }</style><style type="text/css">.animation-iteration-count.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-iteration-count: 1;">animation-iteration-count: 1;</code></p><div class="example-description"><p>The animation will only play <strong>once</strong>.</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-iteration-count square square--plum" id="animation-iteration-count-1">Hello<br>World</div></div></aside><style type="text/css">#animation-iteration-count-1{ animation-iteration-count:1;}</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-iteration-count: 2;">animation-iteration-count: 2;</code></p><div class="example-description"><p>You can use <strong>integer values</strong> to define a <em>specific</em> amount of times the animation will play.</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-iteration-count square square--plum" id="animation-iteration-count-2">Hello<br>World</div></div></aside><style type="text/css">#animation-iteration-count-2{ animation-iteration-count:2;}</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-iteration-count: infinite;">animation-iteration-count: infinite;</code></p><div class="example-description"><p>By using the keyword <code>infinite</code>, the animation will play indefinitely.</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-iteration-count square square--plum" id="animation-iteration-count-infinite">Hello<br>World</div></div></aside><style type="text/css">#animation-iteration-count-infinite{ animation-iteration-count:infinite;}</style></section></section><section id="animation-name" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-name/" data-property-name="animation-name" 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-name">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-name" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-name"><span>#</span>animation-name</a></h2><div class="property-description"><p>Defines <em>which</em> animation keyframes to use.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-name"></a></div></header><style type="text/css">.animation-name { animation-iteration-count: infinite; }</style><style type="text/css">.animation-name.is-animated { animation-duration: 2s; }</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-name: none;">animation-name: none;</code></p><div class="example-description"><p>If no animation name is specified, no animation is played.</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-name square square--plum" id="animation-name-none">Hello<br>World</div></div></aside><style type="text/css">#animation-name-none{ animation-name: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-name: fadeIn;">animation-name: fadeIn;</code></p><div class="example-description"><p>If a name is specified, the <strong>keyframes</strong> matching that name will be used.</p><p>For example, the <code>fadeIn</code> animation looks like this:</p><p><pre>@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}</pre></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-name square square--plum" id="animation-name-fadein">Hello<br>World</div></div></aside><style type="text/css">#animation-name-fadein{ animation-name:fadeIn;}</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-name: moveRight;">animation-name: moveRight;</code></p><div class="example-description"><p>Another example: the <code>moveRight</code> animation:</p><p><pre>@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}</pre></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-name square square--plum" id="animation-name-moveright">Hello<br>World</div></div></aside><style type="text/css">#animation-name-moveright{ animation-name:moveRight;}</style></section></section><section id="animation-play-state" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-play-state/" data-property-name="animation-play-state" 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-play-state">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-play-state" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-play-state"><span>#</span>animation-play-state</a></h2><div class="property-description"><p>Defines if an animation is playing or not.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-play-state"></a></div></header><style type="text/css">.animation-play-state { animation-duration: 2s;animation-iteration-count: infinite; }</style><style type="text/css">.animation-play-state.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-play-state: running;">animation-play-state: running;</code></p><div class="example-description"><p>If the <code>animation-duration</code> and <code>animation-name</code> are defined, the animation will start playing automatically.</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-play-state square square--plum" id="animation-play-state-running">Hello<br>World</div></div></aside><style type="text/css">#animation-play-state-running{ animation-play-state:running;}</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-play-state: paused;">animation-play-state: paused;</code></p><div class="example-description"><p>The animation is set paused at the <strong>first keyframe</strong>.</p><p>This is different than having either no <code>animation-duration</code> or <code>animation-name</code> at all. If the animation is paused, the style applied is that of the <em>first</em> keyframe, and <strong>not</strong> the default style.</p><p>In this example, the square is visible by default, but the on the first keyframe of <code>fadeAndMove</code>, the <code>opacity</code> is set to <code>0</code>. When paused, the animation will be &quot;stuck&quot; on this first keyframe, and will thus be invisible.</p><p><pre>@keyframes fadeAndMove {
  from {
    opacity: 0;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}</pre></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-play-state square square--plum" id="animation-play-state-paused">Hello<br>World</div></div></aside><style type="text/css">#animation-play-state-paused{ animation-play-state:paused;}</style></section></section><section id="animation-timing-function" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/animation-timing-function/" data-property-name="animation-timing-function" 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-timing-function">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#animation-timing-function"><span>#</span>animation-timing-function</a></h2><div class="property-description"><p>Defines how the values between the <em>start</em> and the <em>end</em> of the animation are calculated.</p></div><div class="property-animation"><a class="button property-animation-toggle" data-property-name="animation-timing-function"></a></div></header><style type="text/css">.animation-timing-function { animation-duration: 3s;animation-fill-mode: forwards; }</style><style type="text/css">.animation-timing-function.is-animated { animation-name: moveRight; }</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-timing-function: ease;">animation-timing-function: ease;</code></p><div class="example-description"><p>The animation starts slowly, accelerates in the middle, and slows down at the end.</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-timing-function square square--plum" id="animation-timing-function-ease">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-ease{ animation-timing-function:ease;}</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-timing-function: ease-in;">animation-timing-function: ease-in;</code></p><div class="example-description"><p>The animation starts slowly, and accelerates gradually until the end.</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-timing-function square square--plum" id="animation-timing-function-ease-in">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-ease-in{ animation-timing-function:ease-in;}</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-timing-function: ease-out;">animation-timing-function: ease-out;</code></p><div class="example-description"><p>The animation starts quickly, and decelerates gradually until the end.</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-timing-function square square--plum" id="animation-timing-function-ease-out">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-ease-out{ animation-timing-function:ease-out;}</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-timing-function: ease-in-out;">animation-timing-function: ease-in-out;</code></p><div class="example-description"><p>Like <code>ease</code>, but more pronounced.</p><p>The animation starts quickly, and decelerates gradually until the end.</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-timing-function square square--plum" id="animation-timing-function-ease-in-out">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-ease-in-out{ animation-timing-function:ease-in-out;}</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-timing-function: linear;">animation-timing-function: linear;</code></p><div class="example-description"><p>The animation has a <em>*constant speed</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-timing-function square square--plum" id="animation-timing-function-linear">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-linear{ animation-timing-function:linear;}</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-timing-function: step-start;">animation-timing-function: step-start;</code></p><div class="example-description"><p>The animation jumps <em>instantly</em> to the <strong>final state</strong>.</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-timing-function square square--plum" id="animation-timing-function-step-start">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-step-start{ animation-timing-function:step-start;}</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-timing-function: step-end;">animation-timing-function: step-end;</code></p><div class="example-description"><p>The animation stays at the <strong>initial state</strong> until the end, when it <em>instantly</em> jumps to the <strong>final state</strong>.</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-timing-function square square--plum" id="animation-timing-function-step-end">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-step-end{ animation-timing-function:step-end;}</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-timing-function: steps(4, end);">animation-timing-function: steps(4, end);</code></p><div class="example-description"><p>By using <code>steps()</code> with an <strong>integer</strong>, you can define a specific <em>number</em> of steps before reaching the end. The state of the element will <em>not</em> vary gradually, but rather <strong>jump</strong> from state to state in separate instants.</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-timing-function square square--plum" id="animation-timing-function-steps4-end">Hello<br>World</div></div></aside><style type="text/css">#animation-timing-function-steps4-end{ animation-timing-function:steps(4, end);}</style></section></section><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>