适用于将一个css动画应用于多个元素

Question

我无法在任何文档中找到对此问题的答案，也不能在Stack上查看此问题。

如果我将一个动画应用于多个选择器，我的css技术上是否正确？我看过一些问题，询问是否可以将多个动画应用于一个选择器，但是如果一个动画可以应用于多个选择器则不会。

下面的代码演示如何，我建议使用一个动画的多个选择：

.btn.tap.area:hover + .ring.container .ring.a, 
    .btn.tap.area:hover + .ring.container .ring.c { 
    animation-name: clockwise; 
    } 
    .btn.tap.area:hover + .ring.container .ring.b, 
    .btn.tap.area:hover + .ring.container .ring.d { 
    animation-name: counter-clockwise; 
    } 

    .btn.tap.area:hover + .ring.container .ring.a { 
    animation-duration: 1.33s; 
    } 
    .btn.tap.area:hover + .ring.container .ring.b { 
    animation-duration: 1s; 
    } 
    .btn.tap.area:hover + .ring.container .ring.c { 
    animation-duration: .67s; 
    } 
    .btn.tap.area:hover + .ring.container .ring.d { 
    animation-duration: .33s; 
    } 

    @keyframes clockwise { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
    } 
    @keyframes counter-clockwise { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(-360deg); 
    } 
    } 

Answer 1

是，将一个动画的许多元素是完全有效的。它不仅可以通过不使用重复动画节省浏览器的工作量，还可以将kb文件保存在CSS文件本身中。此外，如果您只需为多个元素调用一个动画，如果出现错误，稍后修复会变得更加容易。

我可以只用粗略的研究发现最接近的事是：

同样@keyframes规则名称可以在 动画名内重复。动画名称的更改通过首先遍历新动画列表 来动态更新现有动画，并且对于每个动画，在 中查找现有动画列表中的最后一个匹配动画。如果找到匹配，则使用与其在动画新列表中的位置相对应的动画属性更新现有的动画，同时如上所述保持其当前回放时间的 。匹配的动画是 从现有的动画列表中删除，使其不会匹配 两次。如果找不到匹配，则创建新的动画。作为 结果，将动画名称从'a'更新为'a，a'将导致'a'的 现有动画成为列表 中的第二个动画，并且将为第一个项目创建新的动画列表。

来自：https://drafts.csswg.org/css-animations/#animations

在哪里，这将表明，一个在一个animation-name属性有效重复动画，我会假设，延长规则多个元素也是有效的。将多个元素应用于一个动画的个人体验从未打破页面，导致任何错误或错误。

---

UPDATE：（。我们知道这是有效的使用在多个元素一个背景）

这一段更好地描述了意图，并猜测它与背景属性类似

4.2。动画名称属性

animation-name属性定义了应用的动画列表。 每个名称用于选择提供动画的 属性值的规则的关键帧。如果名称与任何 关键帧at-rule不匹配，则没有要动画的属性，并且动画将不会执行。此外，如果动画名称不是 那么将不会有动画。这可用于覆盖来自级联的任何动画。如果多个动画是 试图修改相同的属性，那么最接近 名称列表的末尾的动画胜出。按名称 列出的每个动画应具有下列其他动画属性 的对应值。如果其他动画 属性的值列表长度不相同，则动画名称列表的长度将确定开始动画时检查的每个列表 中的项目数。该列表与 的第一个值相匹配：末尾的超出值未被使用。如果 其中一个 其他属性没有足够的逗号分隔值以匹配 动画名称的值数量，则UA必须通过重复值列表来计算其使用的值 ，直到有足够的值为止。这种截断或重复不会影响计算值。注： 这类似于background- *属性的行为， 背景图像类似于动画名称。

https://drafts.csswg.org/css-animations/#animation-name