title: Transform scale an html element and detransform with a javascript setTimeout function
body: <p>I have this copy icon I want to transform scale when i click and detransform after 3 seconds.
  Here is the HTML for the icon:-</p>
  
  <pre><code>   &lt;span class="customURL-copy copy"&gt;
        &lt;i class="far fa-clone"&gt;&lt;/i&gt;
     &lt;/span&gt;
  </code></pre>
  
  <p>I decided that I will add a class of "copy-animation" to the  tag when clicked like so:-</p>
  
  <pre><code>const copyIcons = document.querySelectorAll(".copy"); //thr are multiple,fr example sake I have demonstrated only one
  
    copyIcons.forEach((icon)=&gt;{
     icon.addEventListener("click",(event)=&gt;{
       const child =  event.target.childNodes[1]; //the &lt;i&gt; tag
       child.classList.add("copy-animation");
       setTimeout(function(){
        child.classList.remove("copy-animation");
       console.log(child.classList);
       },3000)
     })
   })
  </code></pre>
  
  <p>The CSS code for class "copy-animation" is as below -</p>
  
  <pre><code>.copy-animation{
    transform:scale(1.5,1.5);
  }
  </code></pre>
  
  <p>The event listener successfully adds the ".copy-animation" class to the icon tag and the icon scales.Inside the setTimeout function which runs 3 seconds after the event listener is fired.I am removing the ".copy-animation" class to supposidly scale back the icon.But that is not happening.The icon remains scaled even after removing the ".copy-animation" class successfully.
  The problem is that the icon is not scaling down even after the successful removal of the ".copy-animation" class.
  Please help me out with this.
  Any kind of help is really appriciated.THANK YOU</p>