CSS Animation - Change％

我有一个CSS制作的动画，当用户点击一个按钮时，我想改变％（或者关键帧）。意味着动画应该继续播放，但是从指定的关键帧开始，它的关键帧如下：HTML是这样的：CSS Animation - Change％

<!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>

动画工作正常。问题是，我找不到任何可用于更改关键帧的属性（object.style.frame不是属性!!）

是否有任何此类属性存在执行此操作？有谁知道那是什么属性？

你的帮助是非常赞赏

来源

2014-08-28 Shubham Gupta

你可以发布一个链接到JSFiddle？ – RevanProdigalKnight 2014-08-28 17:56:56

为什么你没有第二个@keyframes calles secondary或其他的东西，并有0％的关键帧是什么主要的50％关键帧是 – GifCo 2014-08-28 18:00:25

我[制作演示]（http://jsfiddle.net/82pwzf77/2/），你可以捣鼓@RevanProdigalKnight。 – Kraz 2014-08-28 18:37:04

基于你在说什么它看起来好像你需要每个关键帧分开，并把它通过脚本为元素的每个实例。我相信你可以用jQuery来做这件事，当然这需要编码和实现。

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

我相信这也是@GifCo所推动的，如果我没有弄错的话。你可以这么做，就像这样，它可能会变得有点混乱，并且在编码端采取更多 - 我想，“循环” - 因为该方法更环形而不是线性，我认为每个编码关键帧实例从一个到下一个将更直接。

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

希望我能够借助大脑并以某种方式提供帮助，希望这一切都能让我的朋友感受到至少某种程度的感觉，欢呼和快乐！ :)

来源

2014-08-28 18:34:31 dvr5fixfx

CSS Animation - Change％

回答

相关问题