動畫：速記屬性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>