Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
3,134
在上一篇 [CSS Animation] 2. keyframes 中的群組化 文章中，瞭解到了 @keyframes 的群組化寫法。緊接著來介紹在一個元素當中，可以套用多個動畫效果嗎？
建立多個動畫效果
這裡我們先分別建立兩個動畫效果：
1、rotation：關鍵影格(keyframes)設定一個在 50%，也就是動畫執行到一半的時候，需旋轉 360 度。
2、stretch：關鍵影格(keyframes)設定一個在 50%，也就是動畫執行到一半的時候，需向右移動 300px。
@keyframes rotation {
50% {
transform: rotate(360deg);
}
}
@keyframes stretch {
50% {
margin-left: 300px;
}
}
套用多個動畫效果至元素
將 rotation 及 stretch 兩個動畫效果，套用至 div.multi_ani 這個元素上，從以下的程式碼，可以看出 animation-name 指定的方式是用半形逗號做分隔，也分別指定 animation-duration 的秒數(6s 即 6 秒的意思)。
所以解讀為：div.multi_ani 套用了兩個動畫效果，是 rotation 和 stretch 這兩個，且會「同時」執行，然後 rotation 共執行 3 秒，stretch 共執行 6 秒，整個動畫效果完成時間為 6 秒。
div.multi_ani{
border: 1px solid red;
display: inline-block;
animation-name: rotation, stretch;
animation-duration: 3s, 6s;
}
範例
完整範例如下：
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Tweet
寫了
5860316篇文章，獲得
23313次喜歡