javascript - 检测系统时间并在浏览器中设置css动画开始时间

Question

我有一个 html 页面，它有一个简单的 CSS 动画，没有什么特别的，只是两种颜色之间的背景过渡。

目前我似乎无法弄清楚如何获取系统时间并在指定时间触发动画触发器

我想在多个移动设备上以 chrome 加载它。获取系统时间，然后在达到预设时间时循环播放动画。

Answer 1

我根据第二个使用animation-play-state做了一个例子。这适用于任何特定时间。

const div = document.querySelector("div");

function getTime(){
  let date = new Date();
  let second = date.getSeconds();
  console.log(second);
  
  if(second == 10){
    div.style.animationPlayState = "running";
  }
}
setInterval(function(){
  getTime();
},1);

div {
  width: 300px;
  height: 100px;
  background-color: red;
  animation:animate 2s linear infinite;
  animation-play-state:paused;
}

@keyframes animate {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

<div></div>