css動畫

1. css transition (隱式動畫)

可設定兩個狀態之間的平滑過渡

可指定的屬性

• transition-delay 變化發生的延遲時間
• transition-duration 變化發生的持續時間
• transition-property 在指定屬性上應用transition設定
• transition-time-function 指定變化發生的速度（預設為ease）
  • linear 勻速
  • ease-in 加速
  • ease-out 減速
  • cubic-bezier 自定義速度模式（貝塞爾函式）。 貝塞爾曲線定製工具網頁

示例（hover動畫）

• 未設定動畫

  .item {
    height: 60px;
    width: 30px;
    background: grey;
    margin: 10px;
  }
  
  .item:hover{
    height: 150px;
    width: 150px;
    background: green;
  }
   
  

• 設定transition

  t1 t2

  .t1{
    /* 設定所有屬性在1s內加速變化 */
    transition: 1s all ease-in;
  }
  
  .t2{
      /* 高和顏色在1s內變化， 之後寬度變化*/
      transition: 1s height ease-in,
                  1s 1s width cubic-bezier(.17,.67,.83,.67),
                  1s background;
  }
  

事件： transitionend

• 在css完成過渡時觸發

  object.addEventListener('transitionend', function(){
    // do something
  })
 

問題

• 需要事件觸發：如hover，自定義class的增加等。
• 一次性，無法重複使用，除非一再觸發。
• 只有兩個狀態，沒有中間狀態。
• 對多個屬性變化的支援不夠。
• 支援設定的屬性有限。（參考：animatable）

2. CSS Animation

通過指定關鍵幀 @keyfrmaes 來設計動畫。

• 支援多箇中間狀態（使用百分比設定）
• 可設定重複次數： n次或無數次
• 可設定動畫結束時的元素狀態： animation-fill-mode
• animation-direction: 可設定動畫播放時狀態變化的順序

可設定的屬性

• animation-name: 動畫名稱

• animation-duration: 持續時間;
• animation-timing-function: 變化發生的速度; （可指定steps函式）
  • 時間函式可以應用於整個動畫中，也可以應用於關鍵幀的某兩個百分比之間
• animation-delay: 變化發生的延遲時間;
• animation-fill-mode: 結束狀態; (none | forwards | backwards | both)
• animation-direction: 狀態變化的順序; (normal | reverse | alternate |alternate-reverse)
• animation-iteration-count: 動畫重複次數（infinite-無限次）;
• animation-play-state: 動畫突然中止時的狀態（如hover動畫中滑鼠移除）（paused | running)（無法簡寫）

@keyframes 定義動畫的各個狀態（關鍵幀）

• 與animation-name相對應
• 使用百分比設定中間狀態（from與0%相同， to與100%相同）

事件

1. animationstart - 動畫開始時觸發
2. animationiteratoin - 動畫重複播放時
3. animationend - 動畫完成後觸發

簡單示例

.a1{    animation: anime1 2s infinite;  }
.a2{    animation: rainbow 6s infinite, resize 2s infinite;  }  
.anime:hover{    animation-play-state: paused;  }

@keyframes anime1{
  from, to { background: yellow; height: 50px; }
  50% { background: orange; height: 20px;}
}

@keyframes rainbow{
  0% { background: red; }
  20% { background: orange; }
  40% { background: yellow; }
  60% { background: green; }
  80% { background: blue; }
  100% { background: purple; }
}

示例 bounce

@keyframes bounce {
  from, 20%, 53%, to { 
    transform: translate3d(0, 0 ,0); 
    opacity: 1;
  }
  40%, 43% { 
    transform: translate3d(0, -30px, 0) scaleY(1.2);
    opacity: 0.6;
  }
  70% {
    transform: translate3d(0, -15px, 0) scaleY(1.1);
    opacity: 0.8;
  }
  80% { 
    transform: translate3d(0, 0, 0) scaleY(0.9);
    opacity: 0.9;
  }
}