此篇文章瀏覽量:
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; }
範例
完整範例如下: