javascript和css时间是否同步？答案

【问题标题】：Are javascript and css timing synchronized?javascript和css时间是否同步？
【发布时间】：2013-06-05 08:09:23
【问题描述】：

javascript（超时、间隔）和 css（动画、延迟）时间是否同步？

例如：

#anim1 {
animation: anim1 10s linear;
display: none;
}

anim1.style.display = "block" ;
setTimeout(function() {
 anim2.style.webkitAnimation= 'anim2 10s linear';
}, 10000);

anim2 会在 anim1 结束时精确触发吗？是否因浏览器而异？在这种情况下，我对 webkit 焦点更感兴趣。

请注意，anim1 是通过 javascript 触发的，以避免加载时间不一致。

NB ：这是一个理论问题，上面的代码是一个说明，你不能在家里使用它，因为有更合适的方法可以这样做。

【问题讨论】：

标签： javascript css animation time

【解决方案1】：

据我所知，无法保证。但是，您可以监听一些事件；

anim1.addEventListener('animationend',function(){
    anim2.style.webkitAnimation= 'anim2 10s linear';
}

请注意，由于这些是新的，因此您仍然需要考虑供应商前缀； webkitAnimationEnd 和 oanimationend 用于 Webkit 和 Opera。

正如我最初的回答（错误地）建议的那样，如果您想使用 CSS 过渡而不是动画，可以使用 transitionend（带有类似前缀）。

【讨论】：

@Kyslik 是的，但我能给出的最佳答案是“我怀疑”。所以这就是我要解决这个特定问题的方法。它也更整洁；时间可以更改而不会出现不一致的风险。
我一直在查看规范，看不到任何表明 JavaScript 和 CSS 时间有任何关联的东西。我希望它是未定义的，但这是一个有趣的问题。
谢谢，由于“我怀疑它”的答案，标记为已接受。我仍然对这方面缺乏公开发表感到惊讶。
我不知道有这个事件存在

【解决方案2】：

这是错误的做法。不能保证它们会同步，尽管它们很可能会很接近。

为动画的开始、结束提供事件。

https://developer.apple.com/documentation/webkitjs/webkitanimationevent 详细介绍了这些。

使用如下代码：

element.addEventListener("webkitAnimationEnd", callfunction,false);

绑定到它。

【讨论】：

可能会建议做这种动画，但真正的问题是：Are JavaScript and CSS timing synchronized?
确实，感谢您的回答，但这段代码更多的是理论上的说明，而不是现实生活中的示例。