# 5.3 同個元素套用多個 animation

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

* 0% \~ 50%：從 0 度旋轉 360度。
* 50% \~ 100%：從 360 倒轉回至 0 度。

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

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

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

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

* 各個動畫效果以半形逗號做分隔。
* rotation 動畫效果總共執行 3 秒。
* move 動畫效果總共執行 6 秒。

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

### 範例

{% embed url="<https://codepen.io/carlos411/pen/mdyEEjr>" %}