如何同時觸發多個CSS動畫？

同時觸發多個 CSS 動畫

處理 CSS 動畫時，通常需要同時執行多個動畫。這可以透過利用動畫屬性來實現。

程式碼結構

要同時觸發兩個動畫，可以在動畫聲明中使用逗號分隔的列表，如下所示：

animation: rotate 1s, spin 3s;

在這種情況下，旋轉和旋轉動畫都將應用於指定的元素。每個動畫都將保留其預先定義的屬性，例如持續時間和計時函數。

示範實作

為了說明這個概念，請考慮以下範例程式碼：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation: spin 2s linear infinite, scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

這裡，使用逗號在 -webkit-animation 屬性中定義多個動畫。旋轉動畫將每 2 秒旋轉圖像一次，而縮放動畫將每 4 秒將其尺寸加倍。

現場示範

要查看此效果的實際效果，請參閱以下 URL： http://jsfiddle.net/Ugc5g/3392/

以上是如何同時觸發多個CSS動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！