动画：速记属性vs动画名称：

Question

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

我的问题是关于速记动画属性 vs漫长的路。

当你想链两个动画在一起，你不能做以下

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

这是行不通的，但如果你通过降低-name它的工作原理如下。

animation: keyframename1 1s, keyframename2 3s; 

我不能找到任何信息的任何地方，为什么你需要的名称部分从选择下降为它工作。我知道这是一个速记属性，但似乎并不是一个冗长的包含2个关键帧的工作方式。

因为您声明动画名称：它只会采用第一个关键帧名称而忽略第二个。但动画：应该是为了将一个关键帧的各种选择器组合起来。不用于组合多个关键帧名称。

你会如何包含两个关键帧名称，而不是以简写的方式一个接一个地工作？是否可以使用动画名称的选择器：？为什么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>