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保存在CSS文件中。此外，如果你只需要为许多元素调用一个动画，如果出现问题，以后更容易修复它。

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

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

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

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

更新：

本段更好地描述了意图，并推测它与背景属性类似（我们知道在多个元素中使用一个背景是有效的。）

4.2。动画名称属性

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

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

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

1 个答案: