为什么Webkit动画使用类选择器生效，使用ID选择器时不生效？

问题原因 #

你遇到的现象和ID选择器本身没有关系，CSS规范完全支持用ID选择器控制animation-play-state属性，也没有针对动画属性的特殊ID规则。你代码无法运行的核心原因是操作的元素和绑定动画的元素不一致：

• 第一个可运行版本中，你用标签选择器div给所有div元素都绑定了动画，外层#notMyDIV也包含在内，所以你JS中修改#notMyDIV的动画状态可以正常生效。
• 第二个版本中，你仅给类名为myDiv的子元素#myDIV绑定了动画，外层#notMyDIV本身没有动画配置，你JS中一直修改外层元素的动画状态自然不会有效果。

修复方案 #

只需要修改JS代码中操作的元素ID即可：

function playTest(){
    // 把notMyDIV改成绑定了动画的子元素ID myDIV
    document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";
    document.getElementById("myDIV").style.animationPlayState = "running";
}

function playTest2(){
    document.getElementById("myDIV").style.WebkitAnimationPlayState = "paused";
    document.getElementById("myDIV").style.animationPlayState = "paused";
}

补充说明 #

如果你的代码中同时存在ID选择器和类选择器设置动画相关属性，需要注意CSS优先级规则：ID选择器优先级高于类选择器，如果ID选择器中定义了animation-play-state，用类选择器修改该属性会被优先级更高的ID设置覆盖，这是CSS优先级的通用规则，不属于动画属性的特殊限制。

内容的提问来源于stack exchange，提问作者Ethan Dunzer