CSS动画-更改%_Css_Css Animations

CSS动画-更改%

css

CSS动画-更改%,css,css-animations,Css,Css Animations,我有一个用CSS制作的动画，在其中，每当用户单击按钮时，我想更改%（或关键帧）。这意味着，动画应该继续播放，但从W指定的关键帧开始，它当前位于哪个关键帧。HTML如下所示： <!DOCTYPE html> <html> <head> <style> .animate{ animation:main 5s infinite; } @ keyframes main{ 0%{color:#000000;} 25%{color:#FF0000;

我有一个用CSS制作的动画，在其中，每当用户单击按钮时，我想更改%（或关键帧）。这意味着，动画应该继续播放，但从W指定的关键帧开始，它当前位于哪个关键帧。HTML如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
.animate{
  animation:main 5s infinite;
}
@ keyframes main{
  0%{color:#000000;}
  25%{color:#FF0000;}
  50%{color:#00FF00;}
  75%{color:#0000FF;}
  100%{color:#000000;}
}
</style>
</head>
<body>
<div id="animate" class="animate">Some text</div>
<div onclick="change()">Change frame</div>
</body>
</html>
<script>
function change(){
  document.getElementById("animate").style.frame=50%;   //need help here
}
</script>


.制作动画{
动画：主5s无限；
}
@主关键帧{
0%{color:#000000；}
25%{颜色：#FF0000；}
50%{颜色：#00FF00；}
75%{颜色：#0000FF；}
100%{颜色：#000000；}
}
一些文本
换帧
函数更改（）{
document.getElementById（“animate”）.style.frame=50%；//此处需要帮助
}

动画效果很好。问题是，我找不到任何可以用来更改关键帧的属性（object.style.frame不是属性！！）

是否存在这样的属性来执行此操作？？有人知道那是什么财产吗

非常感谢您的帮助

根据您所说的，您似乎需要分离每个关键帧，并通过该元素的每个实例的脚本调用它。我相信这是jQuery可以做到的，尽管它当然需要编码和实现

从scrict CSS和CSS动画的角度来看，除非您有一个引擎或其他脚本通过js或CSS调用这些关键帧实例，否则它是从头开始堆叠代码

如果我没有弄错的话，我相信这也是@GifCo的意图。同样，你也可以这样做，它可能会变得有点混乱，在编码端需要更多——我想是“循环”，因为这种方法更像是循环的而不是线性的，我认为从一个关键帧实例到下一个关键帧实例的编码会更简单

我不打算在这里把它编码出来，但是1是0%，2是25%，等等，它会是这样的：1=0%，调用1-5来制作动画，2=25%，调用1-5来制作动画等等。当然，您需要找到一种在脚本和样式表之间区分它们的方法，否则在播放动画时，您将一次调用它们。5个关键帧，每个实例设置5次动画，剩下25个动画，每个动画都需要一个代码段才能运行

希望我能提供一些帮助和帮助，希望这一切至少有一定的意义，为我的朋友欢呼和快乐

你能发布一个到JSFIDLE的链接吗？为什么你不能有第二个@keyframes调用secondary或其他什么，并且它的0%关键帧是main的50%关键帧isI，你可以摆弄它@RevanProdigalKnight