Javascript 当我使用JS时，CSS动画速度变慢了

因此，我尝试制作动画手表，只使用

div

元素。问题是，当我使用JavaScript为每只手设置直角时，秒针的速度会逐渐改变。没有JavaScript动画效果很好

HTML:

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

---

以下是。

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

setInterval（函数（）{app（）}，1000）

看这把小提琴：

dewd提出了一个很好的方法。你可以稍微修改一下，让它看起来更酷

  hoursHand.setAttribute('style', 'transform: rotate(' +
  hoursHandAngle + 'deg); transition: all 1s; transition-timing-function: linear;')
  minutesHand.setAttribute('style', 'transform: rotate(' +
  minutesHandAngle + 'deg); transition: all 1s; transition-timing-function: linear;')
  secondsHand.setAttribute('style', 'transform: rotate(' +
  secondsHandAngle + 'deg); transition: all 1s; transition-timing-function: ease;')

我的解决方案在这里

可能您应该设置
动画计时功能：线性用于动画。我正在想办法把它放在哪里。不，它不起作用：（idk，似乎对我有用，当我打开它时，秒针非常慢，几乎不动。是的，它可以工作。但我真的很想用CSS实现这个动画。不过，谢谢。@VyacheslavPalamar CSS仅仅不会准确，因为它没有当前时间的概念。它会在几分钟或几分钟内与实时不同步ess.使用javascript，您每次运行函数时都会重新检查实际时间。css动画、超时和间隔是最好的努力-永远不会精确。实际上，您的JS方式似乎是最简单的。我不会说使用css+JS是不可能的，但它变得有点复杂，因为分针动画应该在秒针位于0（小时也是如此）。如果我们尝试使用CSS
动画延迟来执行此操作，则秒针始终会精确滞后1分钟（尽管它从校正位置开始（如）.所以我给你的简单解决方案a+1/它看起来很酷，但当秒针到达60秒时，它会做翻转动作（修正它：）…编辑：虽然似乎还有一些其他问题，请你在“之前”解释一下好吗事情？我读过，但没有真正理解。我创建这个伪元素是为了不破坏你的html结构，我做了一个演示，没有“：：before”在这里，你已经通过选择一个元素的直接子元素解决了这个问题？我的意思是，在这种情况下，使用
>div
？div=“：：before”
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

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

  hoursHand.setAttribute('style', 'transform: rotate(' +
  hoursHandAngle + 'deg); transition: all 1s; transition-timing-function: linear;')
  minutesHand.setAttribute('style', 'transform: rotate(' +
  minutesHandAngle + 'deg); transition: all 1s; transition-timing-function: linear;')
  secondsHand.setAttribute('style', 'transform: rotate(' +
  secondsHandAngle + 'deg); transition: all 1s; transition-timing-function: ease;')

.seconds-hand-center>div {
  -webkit-animation:rotate 60s infinite linear;
  -moz-animation: rotate 60s infinite linear;
  animation: rotate 60s infinite linear;
}

.minutes-hand-center>div {
  -webkit-animation:rotate 3600s infinite steps(60) linear;
  -moz-animation: rotate 3660s infinite steps(60) linear;
  animation: rotate 3660s infinite steps(60) linear;
}

.hours-hand-center>div {
  -webkit-animation:rotate 43200s infinite steps(60) linear;
  -moz-animation: rotate 43200s infinite steps(60) linear;
  animation: rotate 43200s infinite steps(60) linear;
}

.seconds-hand, .minutes-hand, .hours-hand {
  position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
}
.seconds-hand::before, .minutes-hand::before, .hours-hand::before {
  content: "";
  position: absolute;
  background: #7f8c8d;
  top: 50%;
  left: 50%;
}
.seconds-hand::before{
  height: 120px;
  width: 2px;
  margin-left: -1px;
}
.minutes-hand::before {
  width: 6px;
  height: 130px;
  margin-left: -3px;
}

.hours-hand::before {
  width: 10px;
  height: 70px;
  margin-left: -5px;
}