css - 有效将一个 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

是的，将一个动画应用于多个元素是完全有效的。通过不使用重复的动画，它不仅节省了浏览器要做的事情，而且在 CSS 文件本身中节省了 kb。另外，如果您只需为多个元素调用一个动画，那么如果出现问题，稍后修复它会变得更容易。

通过粗略的研究，我能找到的最接近的东西是:

The same @keyframes rule name may be repeated within an animation-name. Changes to the animation-name update existing animations by iterating over the new list of animations from last to first, and, for each animation, finding the last matching animation in the list of existing animations. If a match is found, the existing animation is updated using the animation properties corresponding to its position in the new list of animations, whilst maintaining its current playback time as described above. The matching animation is removed from the existing list of animations such that it will not match twice. If a match is not found, a new animation is created. As a result, updating animation-name from ‘a’ to ‘a, a’ will cause the existing animation for ‘a’ to become the second animation in the list and a new animation will be created for the first item in the list.

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

这表明一个 animation-name 属性中的一个重复动画是有效的，我认为将规则扩展到多个元素也是有效的。在多个元素上应用一个动画的个人经验从未破坏页面，导致任何错误或错误。

---

更新:

这一段更好地描述了意图，并推测它类似于背景属性(我们知道在多个元素上使用一个背景是有效的。)

4.2. The animation-name property

The animation-name property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute. Furthermore, if the animation name is none then there will be no animation. This can be used to override any animations coming from the cascade. If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins. Each animation listed by name should have a corresponding value for the other animation properties listed below. If the lists of values for the other animation properties do not have the same length, the length of the animation-name list determines the number of items in each list examined when starting animations. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn’t have enough comma-separated values to match the number of values of animation-name, the UA must calculate its used value by repeating the list of values until there are enough. This truncation or repetition does not affect the computed value. Note: This is analogous to the behavior of the background-* properties, with background-image analogous to animation-name.

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