Html 如果选择器不再匹配，如何将CSS3动画运行到底？

我一直认为CSS3动画（不同于CSS3转换）一旦开始，总是完成任务，无论选择器是否不再匹配激活它们的元素

我今天意识到我可能错了

在以下示例中，动画由

：focus

和

：active

伪类触发。 关注第一个文本字段：

• 如果您缓慢地按tab按钮，您将看到动画正确开始和结束
• 如果快速按tab按钮，您将看到，一旦新元素获得焦点，旧元素的动画将立即结束并消失

@-webkit关键帧已按下{
0%，100%{变换：比例（1）；}
50%{变换：比例（2）；}
}
@关键帧按下{
0%，100%{变换：比例（1）；}
50%{变换：比例（2）；}
}
a:专注，a:主动{
-webkit动画：按下2s；
动画：按下2s键；
}
a、 输入{
边框：1px纯银；
填充物：5px；
高度：40px；
线高：28px；
边际：0px；
显示：内联块；
宽度：33.3%；
框大小：边框框；
背景：白色；
垂直对齐：中间对齐；
}
a{
颜色：淡蓝色；
文本装饰：无；}
输入{
颜色：红色；
}

---

如评论中所述，即使最初应用于动画的选择器规则不再适用，当前也无法强制动画完成一个完整的循环

实现这一点的唯一方法是使用脚本。下面是一个使用JavaScript的示例代码段。这样做的目的是在元素获得焦点时向元素添加一个类（设置了

动画

属性），然后仅在动画结束时将其删除

注意： 我在代码段中使用了webkitAnimationEnd事件，因此它在其他浏览器中不起作用。代码还需要进行更多的微调，因为它当前仅在动画结束时删除该类。所以，如果你在一个循环完成之前签出和签入，那么什么都不会发生。

window.onload=function（）{
var-anchors=document.querySelectorAll（'a'）；
对于（var i=0；i

@关键帧已按下{
0%, 100% {
变换：比例（1）；
}
50% {
变换：尺度（2）；
}
}
.焦点{
动画：按下2s键；
}
A.
输入{
边框：1px纯银；
填充物：5px；
高度：40px；
线高：28px；
边际：0px；
显示：内联块；
宽度：33.3%；
框大小：边框框；
背景：白色；
}
a{
颜色：淡蓝色；
文字装饰：无；
}
输入{
颜色：红色；
}

看起来不像。甚至只是为此提供了一个DOM事件，这意味着您现在甚至无法通过脚本控制它，直到

animationcancel

实现。这并不完全相关，但您是否能够使用

transition

平滑地将其动画化？我以前从未见过这种情况，而且我的代码片段（在ChromeV38中）也没有出现过这种情况。@BoltClock:所以答案是“没有，甚至在jQuery中也没有”？我还没有尝试过，只是假设通过编写脚本它会起作用。嗯，我想我会用一些JS魔术来解决一些问题，然后：/谢谢，请随意添加它作为答案。@Harry：你是对的，它在Firefox上工作得很好，但在Chrome上不工作（无论是动画还是-webkit动画…）：|@Harry是的，这就是我做这类事情的方式，例如在需要时用于IE的可追溯性（不过，通常使用jQuery）。请随意添加它作为答案，我总是向上投票（有用）答：P.S：我也不是移动开发方面的专家……事实上，我甚至不是前端开发人员：D我也喜欢处理这部分，特别是因为我们的超级昂贵的前端人员比我更邋遢：|所以我会全力以赴。