javascript - 更改 CSS3 动画的开始

Question

我想创建一个带有颜色变化行的表格(例如:从 12 点钟开始的半小时内从完全绿色背景变为完全红色)。我设法做到了这一点，但现在我想到了这样一种情况，即当时间的行已经超过 10 分钟时，该站点被调用(所以不是半小时的渐变进度，而是只有 20 分钟，并且该行不会开始完全绿色) .

所以我想知道是否可以设置 CSS 动画的开始时间。也许在关键帧上？我真的不知道，因为我过去没有用 css3 工作太多，我会感谢任何信息:)

[我的动画 CSS]

.timing {
background: linear-gradient(88deg, #05a400, #ff0000);
background-size: 400% 400%;

-webkit-animation: Gradient 180s linear infinite;
-moz-animation: Gradient 180s linear infinite;
animation: Gradient 180s linear infinite;
}

@-webkit-keyframes Gradient {
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}
@-moz-keyframes Gradient {
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}
@keyframes Gradient { 
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}

抱歉，如果标题没有清楚地说明我的问题，我没有找到合适的词...

Answer 1

您可以使用 CSS 变量来调整动画的开始时间，然后您可以使用 JS 简单地修改它:

document.querySelectorAll('.timing')[1].style.setProperty('--t','5s');

.timing {
  background: linear-gradient(88deg, #05a400, #ff0000);
  background-size: 400% 400%;
  animation: Gradient 2s linear infinite var(--t,0s);
  height:80px;
  color:#fff;
  font-size:30px;
}

@keyframes Gradient {
  0% {
    background-position: 0% 53%
  }
  50% {
    background-position: 100% 48%
  }
  100% {
    background-position: 0% 53%
  }
}

<div  class="timing">
This one will start immediately
</div>
<div  class="timing">
This one will start after 5s
</div>