8.3 相同元素套用多個 animation

兩個動畫效果

1、旋轉一圈：

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

2、正方形變圓形：

@keyframes circle {
  0% {
    border-radius: 0;
  }
  100% {
    border-radius: 50%;
  }
}

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

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

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

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

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

例：