Question

我正在尝试使用javascript更改此CSS的50％部分。

@keyframes shake1 {
0% { transform: translate(0px); visibility: hidden; }
1% { visibility: visible;}
50% { transform: translate(0.7px);}
100% { transform: translate(0px); }
}

..使用类似的东西（对不起，这是对它看起来的完整猜测）。.

document.getElementById('@keyframes shake1').style.50%  = "0.6"px;

..以便能够根据当前时间将转换值更改为不同的值（0、0.1、0.2等）。

<script>

var currentTime = new Date().getHours();

if (0 <= currentTime && currentTime < 12) 
{
document.getElementById('@keyframes shake1').style.50%  = "0.1"px;
}

else if (12 <= currentTime && currentTime < 24) 
{
document.getElementById('@keyframes shake1').style.50%  = "0.4"px;
}

</script>

只是在寻找特定的JavaScript短语来定位CSS动画的特定部分？

谢谢！

Answer 1

从技术上讲，有可能（尽管浏览器支持不佳）通过CSSKeyframesRule界面进行访问。

但是，简单地定义另一个名为animation并使用JavaScript将每个单独的动画应用到不同的类可能会更简单。

在您的CSS样式表中：

@keyframes shake1 {...}
@keyframes shake2 {...}

.morning {
  /* use shake1 in an animation */
}

.afternoon {
  /* use shake2 in an animation */
}

在您的脚本中：

var currentTime = new Date().getHours();
var someElement = document.getElementById('#some-id');

if (0 <= currentTime && currentTime < 12) {
  someElement.classList.add('morning');
}
else if (12 <= currentTime && currentTime < 24) {
  someElement.classList.add('afternoon');
}

使用Java脚本更改CSS动画的特定部分

1 个答案: