CSS animation-delay property

CSSWeb DevelopmentFront End Technology

<p>Use the <em>animation-delay</em> property to set a delay for the start of an animation with CSS.</p><p style="">You can try to run the following code to implement the <em>animation-delay</em> property &minus;</p><h4 style="">Example</h4><p style=""><a class="demo" href="http://tpcg.io/SoXyl6" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 150px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: yellow; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation-name: myanim; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation-duration: 2s; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation-delay: 2s; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@keyframes myanim { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background-color: green; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background-color: blue; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;div&gt;&lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
Updated on 23-Jun-2020 15:23:57