css - 动画:速记属性与动画名称:

Question

我到处搜索以找到这个问题的答案，但我找不到。

我的问题是关于shorthand animation property 与 long way around。

当您想将两个动画链接在一起时，您不能执行以下操作

animation-name: keyframename1 1s, keyframename2 3s;

那行不通，但如果您通过删除 -name 执行以下操作，它会起作用。

animation: keyframename1 1s, keyframename2 3s;

我无法在任何地方在线找到任何信息，说明为什么您需要从选择器中删除名称部分才能使其正常工作。我知道这是一个速记属性，但似乎并不是一个冗长的方式来包含 2 个关键帧以一个接一个地工作。

因为一旦您声明了animation-name:，它只会采用第一个关键帧名称而忽略第二个。但是 animation: 应该是为一个关键帧组合各种选择器。不适用于组合多个关键帧名称。

如果不采用速记方式，您将如何包含两个关键帧名称以一个接一个地工作？是否可以使用 animation-name: 的选择器？为什么 W3C 网站不解释您实际上可以在速记属性中链接关键帧名称，而不仅仅是过渡选择器等。

Answer 1

MDN article在我看来，很有见地。

问题是当您指定 animation-name 时只是，您也不能指定持续时间。因此，您建议的规则

animation-name: keyframename1 1s, keyframename2 3s; /* this won't work! */

是无效语法。您的浏览器可能会将此解释为“让我们只应用动画 keyframename1”，但至少在 Firefox 中该规则被完全忽略。实际上，我会预料到这种行为。

您的第二条规则是有效的并且确实会应用两个动画。这是因为 animation指令将获取一个动画列表，每个动画都包含一个名称和持续时间。您可以指定更多，例如 animation-timing-function , animation-iteration-count和 animation-fill-mode .您未指定的值设置为默认值。

这最后一句话很重要!当你写下以下内容时

animation-duration: 10s; /* this will be overwritten by the next line */
animation: keyframename1;

持续时间将为 0s，因为这是 animation 的默认值，如您在链接文章中所见。

前面提到的特定指令也都包含一个列表。因此，如果您想应用多个动画，您可以在单个 animation 规则中完全指定它们，或者使用其他指令分别设置它们的所有属性。

以下代码段说明了这两种方法。可以看到结果完全一样。

@keyframes fly-down {
  from { top: 0; }
  to { top: 100px; }
}

@keyframes fly-right {
  from { left: 0; }
  to { left: 100px; }
}

div {
  display: inline-block;
  position: relative;
  padding: 20px;
  border: 1px solid #000;
}

div.method1 {
  animation-duration: 1s, 3s;
  animation-fill-mode: both;
  animation-name: fly-right, fly-down;
}

div.method2 {
  animation: fly-right 1s both,
             fly-down 3s both;
}

<div class="method1">Hi!</div>
<div class="method2">Hi!</div>