title: CSS animation is slowing down when I use JS
body: <p>So, I try to make the animated watch, only using <code>div</code> elements. The problem is that the second hand gradually changes its speed when I use JavaScript to set the right angle for each hand. Without JavaScript animation works fine.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="rim"&gt;
   &lt;div class="watch"&gt;
     &lt;div class="index index-zero"&gt;&lt;/div&gt;
     &lt;div class="index index-one"&gt;&lt;/div&gt;
     &lt;div class="index index-two"&gt;&lt;/div&gt;
     &lt;div class="index index-three"&gt;&lt;/div&gt;
     &lt;div class="index index-four"&gt;&lt;/div&gt;
     &lt;div class="index index-five"&gt;&lt;/div&gt;
     &lt;div class="index index-six"&gt;&lt;/div&gt;
     &lt;div class="index index-seven"&gt;&lt;/div&gt;
     &lt;div class="index index-eight"&gt;&lt;/div&gt;
     &lt;div class="index index-nine"&gt;&lt;/div&gt;
     &lt;div class="index index-ten"&gt;&lt;/div&gt;
     &lt;div class="index index-eleven"&gt;&lt;/div&gt;
     &lt;div id="hours-hand" class="hours-hand-center"&gt;
       &lt;div class="hours-hand"&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="minutes-hand" class="minutes-hand-center"&gt;
       &lt;div class="minutes-hand"&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="seconds-hand" class="seconds-hand-center"&gt;
       &lt;div class="seconds-hand"&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.rim {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    position: absolute;
    border-radius: 50%;
    margin-left: -162px;
    margin-top: -162px;
    border: 12px solid #7f8c8d;
  }
  
  .watch {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    border-radius: 50%;
  }
  .seconds-hand-center, .minutes-hand-center, .hours-hand-center {
    height: 20px;
    width: 20px;
    top: 50%;
    left: 50%;
    position: absolute;
    border-radius: 50%;
    margin-left: -10px;
    margin-top: -10px;
    background: #7f8c8d;
  }
  
  .seconds-hand-center {
    -webkit-animation:rotate 60s infinite;
    -moz-animation: rotate 60s infinite;
    animation: rotate 60s infinite;
  }
  
  .minutes-hand-center {
    -webkit-animation:rotate 3600s infinite steps(60);
    -moz-animation: rotate 3660s infinite steps(60);
    animation: rotate 3660s infinite steps(60);
  }
  
  .hours-hand-center {
    -webkit-animation:rotate 43200s infinite steps(60);
    -moz-animation: rotate 43200s infinite steps(60);
    animation: rotate 43200s infinite steps(60);
  }
  
  .seconds-hand, .minutes-hand, .hours-hand {
    position: absolute;
    background: #7f8c8d;
    height: 120px;
    width: 2px;
    top: 50%;
    left: 50%;
    margin-left: -1px;
  }
  
  .minutes-hand {
    width: 6px;
    height: 130px;
    margin-left: -3px;
  }
  
  .hours-hand {
    width: 10px;
    height: 70px;
    margin-left: -5px;
  }
  
  
  @-moz-keyframes rotate {
    100% {
      transform: rotateZ(360deg);
    }
  }
  @-webkit-keyframes rotate {
    100% {
      transform: rotateZ(360deg);
    }
  }
  @keyframes rotate {
    100% {
      transform: rotateZ(360deg);
    }
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var app = function app() {
    "use strict"
    var hoursHand = document.getElementById('hours-hand')
    var minutesHand = document.getElementById('minutes-hand')
    var secondsHand = document.getElementById('seconds-hand')
    var time = new Date()
    var hours = time.getHours()
    var minutes = time.getMinutes()
    var seconds = time.getSeconds()
    var secondsHandAngle = seconds * 6 + 180
    var minutesHandAngle = minutes * 6 + 180
    var hoursHandAngle = hours * 6 + minutes / 2 + 180
  
    secondsHandAngle = secondsHandAngle &gt; 360 ?
      secondsHandAngle % 360 : secondsHandAngle
  
    minutesHandAngle = minutesHandAngle &gt; 360 ?
      minutesHandAngle % 360 : minutesHandAngle
  
    hoursHandAngle = hoursHandAngle &gt; 360 ?
      hoursHandAngle % 360 : hoursHandAngle
  
    hoursHand.setAttribute('style', 'transform: rotate(' +
    hoursHandAngle + 'deg);')
    minutesHand.setAttribute('style', 'transform: rotate(' +
    minutesHandAngle + 'deg);')
    secondsHand.setAttribute('style', 'transform: rotate(' +
    secondsHandAngle + 'deg);')
  
  }
  
  window.onload = app
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/q3axya9u/1/" rel="nofollow">fiddle</a>.</p>