HTML DOM Style transition Property

HTMLDOMWeb DevelopmentFront End Technology

<p>The HTML DOM Style transition property returns and modify the value of transition CSS property of an HTML element in an HTML document.</p><h2>Syntax</h2><p>Following is the syntax &minus;</p><p><strong>1. Returning transition</strong></p><pre class="result notranslate">object.transition</pre><p><strong>2. Modifying transition</strong></p><pre class="result notranslate">object.transition = &ldquo;value&rdquo;</pre><p>Here value can be &minus;</p><table class="table table-bordered"><thead><tr><th style="text-align: center;">Value</th><th style="text-align: center;">Explanation</th></tr></thead><tbody><tr><td>initial</td><td>It set this property value to its default value.</td></tr><tr><td>inherit</td><td>It inherits this property value from its parent element.</td></tr><tr><td>property duration timing-function delay</td><td>Here, property represent the name of CSS property which would be transition.timing-function represent the speeding curve of the transition effect. delay represent when the transition effect will begin.</td></tr></tbody></table><p>Let us see an example of HTML DOM Style transition Property:</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/3MegSkDw" rel="nofollow" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;style&gt; &nbsp; &nbsp;body { &nbsp; &nbsp; &nbsp; color: #000; &nbsp; &nbsp; &nbsp; height: 100vh; &nbsp; &nbsp;} &nbsp; &nbsp;.btn { &nbsp; &nbsp; &nbsp; background: #db133a; &nbsp; &nbsp; &nbsp; border: none; &nbsp; &nbsp; &nbsp; height: 2rem; &nbsp; &nbsp; &nbsp; border-radius: 2px; &nbsp; &nbsp; &nbsp; width: 40%; &nbsp; &nbsp; &nbsp; display: block; &nbsp; &nbsp; &nbsp; color: #fff; &nbsp; &nbsp; &nbsp; outline: none; &nbsp; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; &nbsp; margin: 1rem 0; &nbsp; &nbsp;} &nbsp; &nbsp;.circle { &nbsp; &nbsp; &nbsp; height: 100px; &nbsp; &nbsp; &nbsp; width: 100px; &nbsp; &nbsp; &nbsp; background-color: #db133a; &nbsp; &nbsp;} &nbsp; &nbsp;.circle:hover { &nbsp; &nbsp; &nbsp; height: 200px; &nbsp; &nbsp; &nbsp; width: 200px; &nbsp; &nbsp; &nbsp; border-radius: 50%; &nbsp; &nbsp;} &nbsp; &nbsp;.show { &nbsp; &nbsp; &nbsp; font-size: 1.2rem; &nbsp; &nbsp; &nbsp; margin: 1rem 0; &nbsp; &nbsp;} &lt;/style&gt; &lt;body&gt; &lt;h1&gt;DOM Style transition Property Demo&lt;/h1&gt; &lt;div class=&#39;circle&#39;&gt;&lt;/div&gt; &lt;button onclick=&quot;set()&quot; class=&quot;btn&quot;&gt;Set Transition&lt;/button&gt; &lt;div class=&quot;show&quot;&gt;Now, hover on the square&lt;/div&gt; &lt;script&gt; &nbsp; &nbsp;function set() { &nbsp; &nbsp; &nbsp; document.querySelector(&#39;.circle&#39;).style.transition = &quot;all 1s&quot;; &nbsp; &nbsp;} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p><img src="https://www.tutorialspoint.com/assets/questions/media/28396/transistion.jpg" class="fr-fic fr-dib" width="600" height="427"></p><p>Click on &ldquo;<strong>Set Transition</strong>&rdquo; button and then hover on the &ldquo;red&rdquo; square to see the transition effect.</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/28396/dom_Trans.jpg" class="fr-fic fr-dib" width="478" height="344"></p>
raja
Updated on 17-Feb-2021 06:31:15

Advertisements