search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

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

此篇文章瀏覽量: 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;
}

範例

完整範例如下:

若覺得文章有幫助,請多分享,讓其他同好也能吸收網站技能知識。



熱門推薦

本文由 carlos-studiocom 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦