时间戳

首页 > 解决方案 > 更改 CSS3 动画的开始

javascript - 更改 CSS3 动画的开始

问题描述

我想创建一个带有变色行的表格（例如：从 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%}
}

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

标签： javascriptcsscss-animations

解决方案

你可以使用 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>

推荐阅读