CSS animation-duration property

CSSWeb DevelopmentFront End Technology

<p>Use the <em>animation-duration</em> property to set how long an animation should take to complete one cycle</p><h2>Example</h2><p>You can try to run the following code to implement the <em>animation-duration</em> property &minus;</p><p style=""><a class="demo" href="http://tpcg.io/EmPUKS" 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; position: relative; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: red; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation-name: myanim; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation-duration: 2s; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@keyframes myanim { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;from {left: 0px; background-color: green;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to {left: 200px; background-color: blue;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/style&gt; &nbsp; &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>
raja
Updated on 02-Jul-2020 09:22:55

Advertisements