5.3 同個元素套用多個 animation

元素套用兩個動畫效果(@keyframes)

• 0% ~ 50%：從 0 度旋轉 360度。

• 50% ~ 100%：從 360 倒轉回至 0 度。

@keyframes rotation {
  50% {
    transform: rotate(360deg);
  }
}

• 0% ~ 50%：margin-left 從 0 跑到 300px。

• 50% ~ 100%：margin-left 從 300px 跑回至 0。

@keyframes move {
  50% {
    margin-left: 300px;
  }
}

某個元素套用兩個或多個動畫效果

• 各個動畫效果以半形逗號做分隔。

• rotation 動畫效果總共執行 3 秒。

• move 動畫效果總共執行 6 秒。

div.img_block{
  animation-name: rotation, move;
  animation-duration: 3s, 6s;
}

範例