transitions.html

<section id="transition-delay" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/transitions/">In collection: <strong>transitions</strong> </a><a class="property-links-direct" href="{{site.url}}/property/transition-delay/" data-property-name="transition-delay" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="transition-delay">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-transitions" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/transition-delay" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#transition-delay"><span>#</span>transition-delay</a></h2><div class="property-description"><p>Defines how long the transition has to wait before <strong>starting</strong>.</p></div></header><style type="text/css">.transition-delay { padding: 0; }</style><style type="text/css">.transition-delay:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: translateX(200%); }</style><style type="text/css">.transition-delay .square { transition-duration: 1s;transition-timing-function: linear;transition-property: background transform; }</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="transition-delay: 0s;">transition-delay: 0s;</code></p><div class="example-description"><p>The transition 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 transition-delay" id="transition-delay-0s"><p class="square square--alpha">Hover me</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transition-delay: 1.2s;">transition-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 transition-delay" id="transition-delay-12s"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-delay-12s .square { transition-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="transition-delay: 2400ms;">transition-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 transition-delay" id="transition-delay-2400ms"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-delay-2400ms .square { transition-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="transition-delay: -500ms;">transition-delay: -500ms;</code></p><div class="example-description"><p>You can use <strong>negative values</strong>: the transition 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 transition-delay" id="transition-delay--500ms"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-delay--500ms .square { transition-delay: -500ms; }</style></section></section><section id="transition-duration" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/transitions/">In collection: <strong>transitions</strong> </a><a class="property-links-direct" href="{{site.url}}/property/transition-duration/" data-property-name="transition-duration" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="transition-duration">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-transitions" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/transition-duration" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#transition-duration"><span>#</span>transition-duration</a></h2><div class="property-description"><p>Defines how long the transition lasts.</p></div></header><style type="text/css">.transition-duration { padding: 0; }</style><style type="text/css">.transition-duration:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: translateX(200%); }</style><style type="text/css">.transition-duration .square { transition-timing-function: linear;transition-property: background transform; }</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="transition-duration: 0s;">transition-duration: 0s;</code></p><div class="example-description"><p>The transition will last <strong>zero seconds</strong>, and is thus <strong>instant</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 transition-duration" id="transition-duration-0s"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-duration-0s .square { transition-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="transition-duration: 1.2s;">transition-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 transition-duration" id="transition-duration-12s"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-duration-12s .square { transition-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="transition-duration: 2400ms;">transition-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 transition-duration" id="transition-duration-2400ms"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-duration-2400ms .square { transition-duration: 2400ms; }</style></section></section><section id="transition-property" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/transitions/">In collection: <strong>transitions</strong> </a><a class="property-links-direct" href="{{site.url}}/property/transition-property/" data-property-name="transition-property" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="transition-property">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-transitions" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/transition-property" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#transition-property"><span>#</span>transition-property</a></h2><div class="property-description"><p>Defines which properties will transition.</p></div></header><style type="text/css">.transition-property { padding: 0; }</style><style type="text/css">.transition-property:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: translateX(200%); }</style><style type="text/css">.transition-property .square { transition-duration: 1s;transition-timing-function: linear; }</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="transition-property: all;">transition-property: all;</code></p><div class="example-description"><p>The element will transition <strong>all</strong> properties:</p><ul><li><code class="shorthand"><a href="http://cssreference.io/#background">background</a></code></li><li><code class="shorthand"><a href="http://cssreference.io/#color">color</a></code></li><li><code class="shorthand"><a href="http://cssreference.io/#transform">transform</a></code></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 transition-property" id="transition-property-all"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-property-all .square { transition-property: all; }</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="transition-property: none;">transition-property: none;</code></p><div class="example-description"><p>The element will transition <strong>no</strong> property: the transition is thus <strong>instant</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 transition-property" id="transition-property-none"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-property-none .square { transition-property: 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="transition-property: background;">transition-property: background;</code></p><div class="example-description"><p>The element will only transtion the <strong>background</strong> property.</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 transition-property" id="transition-property-background"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-property-background .square { transition-property: background; }</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="transition-property: color;">transition-property: color;</code></p><div class="example-description"><p>The element will only transtion the <strong>color</strong> property.</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 transition-property" id="transition-property-color"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-property-color .square { transition-property: color; }</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="transition-property: transform;">transition-property: transform;</code></p><div class="example-description"><p>The element will only transtion the <strong>transform</strong> property.</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 transition-property" id="transition-property-transform"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-property-transform .square { transition-property: transform; }</style></section></section><section id="transition-timing-function" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/transitions/">In collection: <strong>transitions</strong> </a><a class="property-links-direct" href="{{site.url}}/property/transition-timing-function/" data-property-name="transition-timing-function" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="transition-timing-function">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-transitions" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#transition-timing-function"><span>#</span>transition-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 transition are calculated.</p></div></header><style type="text/css">.transition-timing-function { padding: 0; }</style><style type="text/css">.transition-timing-function:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: translateX(200%); }</style><style type="text/css">.transition-timing-function .square { transition-duration: 1s;transition-property: all; }</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="transition-timing-function: ease;">transition-timing-function: ease;</code></p><div class="example-description"><p>The transition 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 transition-timing-function" id="transition-timing-function-ease"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-ease .square { transition-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="transition-timing-function: ease-in;">transition-timing-function: ease-in;</code></p><div class="example-description"><p>The transition 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 transition-timing-function" id="transition-timing-function-ease-in"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-ease-in .square { transition-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="transition-timing-function: ease-out;">transition-timing-function: ease-out;</code></p><div class="example-description"><p>The transition 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 transition-timing-function" id="transition-timing-function-ease-out"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-ease-out .square { transition-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="transition-timing-function: ease-in-out;">transition-timing-function: ease-in-out;</code></p><div class="example-description"><p>Like <code>ease</code>, but more pronounced.</p><p>The transition 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 transition-timing-function" id="transition-timing-function-ease-in-out"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-ease-in-out .square { transition-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="transition-timing-function: linear;">transition-timing-function: linear;</code></p><div class="example-description"><p>The transition 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 transition-timing-function" id="transition-timing-function-linear"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-linear .square { transition-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="transition-timing-function: step-start;">transition-timing-function: step-start;</code></p><div class="example-description"><p>The transition 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 transition-timing-function" id="transition-timing-function-step-start"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-step-start .square { transition-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="transition-timing-function: step-end;">transition-timing-function: step-end;</code></p><div class="example-description"><p>The transition 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 transition-timing-function" id="transition-timing-function-step-end"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-step-end .square { transition-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="transition-timing-function: steps(4, end);">transition-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 transition-timing-function" id="transition-timing-function-steps4-end"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-timing-function-steps4-end .square { transition-timing-function: steps(4, end); }</style></section></section><section id="transition" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/transitions/">In collection: <strong>transitions</strong> </a><a class="property-links-direct" href="{{site.url}}/property/transition/" data-property-name="transition" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="transition">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-transitions" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/transition" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#transition"><span>#</span>transition</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/transition-property" data-property-name="transition-property">transition-property</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/transition-duration" data-property-name="transition-duration">transition-duration</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/transition-timing-function" data-property-name="transition-timing-function">transition-timing-function</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/transition-delay" data-property-name="transition-delay">transition-delay</a></code>.</p><p>Only <code>transition-duration</code> is <strong>required</strong>.</p></div></header><style type="text/css">.transition { padding: 0; }</style><style type="text/css">.transition:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: translateX(200%); }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transition: 1s;">transition: 1s;</code></p><div class="example-description"><ul><li><code>transition-duration</code> is <strong>set</strong> to <code>1s</code></li><li><code>transition-property</code> <em>defaults</em> to <code>all</code></li><li><code>transition-timing-function</code> <em>defaults</em> to <code>ease</code></li><li><code>transition-delay</code> <em>defaults</em> to <code>0s</code></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 transition" id="transition-1s"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-1s .square { transition: 1s; }</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="transition: 1s linear;">transition: 1s linear;</code></p><div class="example-description"><ul><li><code>transition-duration</code> is <strong>set</strong> to <code>1s</code></li><li><code>transition-property</code> <em>defaults</em> to <code>all</code></li><li><code>transition-timing-function</code> is <strong>set</strong> to <code>linear</code></li><li><code>transition-delay</code> <em>defaults</em> to <code>0s</code></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 transition" id="transition-1s-linear"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-1s-linear .square { transition: 1s 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="transition: background 1s linear;">transition: background 1s linear;</code></p><div class="example-description"><ul><li><code>transition-duration</code> is <strong>set</strong> to <code>1s</code></li><li><code>transition-property</code> is <strong>set</strong> to <code>background</code></li><li><code>transition-timing-function</code> is <strong>set</strong> to <code>linear</code></li><li><code>transition-delay</code> <em>defaults</em> to <code>0s</code></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 transition" id="transition-background-1s-linear"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-background-1s-linear .square { transition: background 1s 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="transition: background 1s linear 500ms;">transition: background 1s linear 500ms;</code></p><div class="example-description"><ul><li><code>transition-duration</code> is <strong>set</strong> to <code>1s</code></li><li><code>transition-property</code> is <strong>set</strong> to <code>background</code></li><li><code>transition-timing-function</code> is <strong>set</strong> to <code>linear</code></li><li><code>transition-delay</code> is <strong>set</strong> to <code>500ms</code></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 transition" id="transition-background-1s-linear-500ms"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-background-1s-linear-500ms .square { transition: background 1s linear 500ms; }</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="transition: background 4s, transform 1s;">transition: background 4s, transform 1s;</code></p><div class="example-description"><p>You can combine <strong>multiple properties</strong> with their own transition duration.</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 transition" id="transition-background-4s-transform-1s"><p class="square square--alpha">Hover me</p></div></div></aside><style type="text/css">#transition-background-4s-transform-1s .square { transition: background 4s, transform 1s; }</style></section></section>