適用於將一個css動畫應用於多個元素

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

是，將一個動畫的許多元素是完全有效的。它不僅可以通過不使用重複動畫節省瀏覽器的工作量，還可以將kb文件保存在CSS文件本身中。此外，如果您只需爲多個元素調用一個動畫，如果出現錯誤，稍後修復會變得更加容易。

我可以只用粗略的研究發現最接近的事是：

同樣@keyframes規則名稱可以在 動畫名內重複。動畫名稱的更改通過首先遍歷新動畫列表 來動態更新現有動畫，並且對於每個動畫，在 中查找現有動畫列表中的最後一個匹配動畫。如果找到匹配，則使用與其在動畫新列表中的位置相對應的動畫屬性更新現有的動畫，同時如上所述保持其當前回放時間的 。匹配的動畫是 從現有的動畫列表中刪除，使其不會匹配 兩次。如果找不到匹配，則創建新的動畫。作爲 結果，將動畫名稱從'a'更新爲'a，a'將導致'a'的 現有動畫成爲列表 中的第二個動畫，並且將爲第一個項目創建新的動畫列表。

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

在哪裏，這將表明，一個在一個animation-name屬性有效重複動畫，我會假設，延長規則多個元素也是有效的。將多個元素應用於一個動畫的個人體驗從未打破頁面，導致任何錯誤或錯誤。

---

UPDATE：（。我們知道這是有效的使用在多個元素一個背景）

這一段更好地描述了意圖，並猜測它與背景屬性類似

4.2。動畫名稱屬性

animation-name屬性定義了應用的動畫列表。 每個名稱用於選擇提供動畫的 屬性值的規則的關鍵幀。如果名稱與任何 關鍵幀at-rule不匹配，則沒有要動畫的屬性，並且動畫將不會執行。此外，如果動畫名稱不是 那麼將不會有動畫。這可用於覆蓋來自級聯的任何動畫。如果多個動畫是 試圖修改相同的屬性，那麼最接近 名稱列表的末尾的動畫勝出。按名稱 列出的每個動畫應具有下列其他動畫屬性 的對應值。如果其他動畫 屬性的值列表長度不相同，則動畫名稱列表的長度將確定開始動畫時檢查的每個列表 中的項目數。該列表與 的第一個值相匹配：末尾的超出值未被使用。如果 其中一個 其他屬性沒有足夠的逗號分隔值以匹配 動畫名稱的值數量，則UA必須通過重複值列表來計算其使用的值 ，直到有足夠的值爲止。這種截斷或重複不會影響計算值。注： 這類似於background- *屬性的行爲， 背景圖像類似於動畫名稱。

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