title: Javascript animated countdown
body: <p>I've been trying to create a countdown that animates the text every time the counter changes. I can execute the change at the start but not sure how to clear the change and repeat it.</p>
  
  <p><strong>HTML &amp; CSS</strong> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;!--meta http-equiv="refresh" content="4; url=index.php"--&gt;
      &lt;style type="text/css"&gt;
          p
          {
              transition: 1s;
              font-size: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;A script on this page starts this clock:&lt;/p&gt;
  &lt;p id="demo"&gt;Login in....&lt;/p&gt;
  
  &lt;script&gt;
  
      //various javascript here
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This script changes the CSS once on the first count but not on count 2 or 1.</p>
  
  <pre><code>//Set the counter variable
      var counter= 4;
  
      //Set the timer to count the counter down
      var timer = setInterval(function() 
      {
          counter--;
          if(counter== 0) 
          {
              clearInterval(timer);
          } 
          else 
          {
              //Execute the CSS change function
              styleChange();
          }
      }, 1000);
  
      function styleChange()
      {
          document.getElementById("demo").innerHTML = (counter);
          document.getElementById("demo").style.fontSize = "500%";
          document.getElementById("demo").style.opacity = "0";
          // In CSS "Demo" is given a transition of 1s to smooth out the animation"
      }
  </code></pre>
  
  <p>The next script doesn't reset the style each time the counter but toggles between styles, not what I'm trying to do but at least it repeats unlike the first script. It just affects the style, if it worked I would add the timer.</p>
  
  <pre><code>    var myVar = setInterval(setStyle, 1000);
  
      function setStyle() {
        var x = document.getElementById("demo");
        x.style.fontSize = x.style.fontSize == "100%" ? "500%" : "100%";
      }
  
      function stopStyle() {
        clearInterval(myVar);
      }
  </code></pre>
  
  <p>I thought of trying to use a "for" to loop through the values of the counter, change the style on a value change then reset the value after but I couldn't get it to work. Visually the effect should look like this but played in reverse and not on acid-> <a href="https://www.youtube.com/watch?v=hsUKu9_Lr6U" rel="nofollow noreferrer">https://www.youtube.com/watch?v=hsUKu9_Lr6U</a>. I've borrowed heavily from w3schools pages about setInterval and clearInterval. </p>