Question

I have the following code working (in Firefox & Safari only – no worries it’s a subtle effect that doesn’t need perfect cross-browser compatibility).

HTML

<span id="rotate_star"></div>

Javscript

<script>
    var count = 0;
    function rotate() {
      var elem2 = document.getElementById('rotate_star');
      elem2.style.MozTransform = 'rotate('+count+'deg)';
      elem2.style.WebkitTransform = 'rotate('+count+'deg)';
      if (count==360) { count = 0 }
      count+=10;
      window.setTimeout(rotate, 30);
    }
    window.setTimeout(rotate, 100);
</script>

I’ll be honest, I’m not the most savvy person in the world when it comes to javascript. I want this animation to repeat in an infinite loop but I want it to delay for 5 seconds every time it makes a complete 360 degree turn.

Can anyone help?

Answer 1

You just need to modify it a tiny bit, and it should do what you want. Try this:

<script>
    var count = 0;
    function rotate() {
      var elem2 = document.getElementById('rotate_star');
      elem2.style.MozTransform = 'rotate('+count+'deg)';
      elem2.style.WebkitTransform = 'rotate('+count+'deg)';
      if (count==360) { 
          count = 10;
          window.setTimeout(rotate, 5000);
      } else {
          count += 10;
          window.setTimeout(rotate, 30);
      }
    }
    window.setTimeout(rotate, 100);
</script>