动画：shorthand 属性 vs 动画名称：

Question

我到处寻找这个问题的答案，但找不到。

我的问题是关于 shorthand 动画属性 与长途跋涉。

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

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

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

animation: keyframename1 1s, keyframename2 3s;

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

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

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

Answer 1

我认为 MDN article 很有见地。

问题是，当您仅指定 animation-name 时，您无法同时指定持续时间。因此，您建议的规则

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

语法无效。您的浏览器可能会将其解释为 "let's only apply animation keyframename1"，但至少在 Firefox 中该规则会被完全忽略。实际上，我会期待这种行为。

你的第二条规则是有效的并且确实会应用两种动画。这是因为animation directive will take a list of animations, each one including a name and duration. You can specify even more, like the animation-timing-function, animation-iteration-count and 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>

动画：shorthand 属性 vs 动画名称：

animation: shorthand property vs animation-name:

css

animation

chaining