[CSS Animation] 3. 同一個元素套用多個動畫效果

在上一篇 [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;}

範例

完整範例如下:

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of