javascript - 当我使用 JS 时，CSS 动画速度变慢

Question

所以，我尝试制作动画 watch ，只使用 div 元素。问题是，当我使用 JavaScript 为每只手设置正确的 Angular 时，秒针会逐渐改变速度。没有 JavaScript 动画效果很好。

HTML:

<div class="rim">
 <div class="watch">
   <div class="index index-zero"></div>
   <div class="index index-one"></div>
   <div class="index index-two"></div>
   <div class="index index-three"></div>
   <div class="index index-four"></div>
   <div class="index index-five"></div>
   <div class="index index-six"></div>
   <div class="index index-seven"></div>
   <div class="index index-eight"></div>
   <div class="index index-nine"></div>
   <div class="index index-ten"></div>
   <div class="index index-eleven"></div>
   <div id="hours-hand" class="hours-hand-center">
     <div class="hours-hand">
     </div>
   </div>
   <div id="minutes-hand" class="minutes-hand-center">
     <div class="minutes-hand">
     </div>
   </div>
   <div id="seconds-hand" class="seconds-hand-center">
     <div class="seconds-hand">
     </div>
   </div>
 </div>

CSS:

.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);
  }
}

JavaScript:

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 > 360 ?
    secondsHandAngle % 360 : secondsHandAngle

  minutesHandAngle = minutesHandAngle > 360 ?
    minutesHandAngle % 360 : minutesHandAngle

  hoursHandAngle = hoursHandAngle > 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

这是 fiddle .

Answer 1

设置一个间隔以每秒更改时间并删除动画手的 css。

setInterval(function(){app()},1000);

/*.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);
}*/`

看这个 fiddle :

https://jsfiddle.net/q3axya9u/2/