1.transition過渡

• 1.指定元素transition: 1s height, 1s width;
• 2.延遲

transition: 1s height, 1s 1s width;
// 上面程式碼指定，width在1秒之後再開始變化，也就是延遲（delay）1秒

• 3.狀態變化速度
• ease：慢-快-慢（預設）
• linear：勻速
• ease-in：加速
• ease-out：減速
• cubic-bezier函式：自定義速度模式演示

語法

// 完整寫法
transition: 1s 1s height linear;
// 常用寫法
transition: 1s;

注意transition一般加在原始元素上，不要加在hover，active等狀態上，不然只針對某種狀態。

2.animation動畫

定義動畫

• 0%可以用from代表，100%可以用to代表

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
// 相當於
@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

• 如果省略某個狀態，瀏覽器會自動推算中間狀態

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

• 可以把多個狀態寫在一行

@keyframes pound {
  from，to { transform: none; }
  50% { transform: scale(1.2); }
}

動畫引數

• animation-fill-mode 動畫結束時的狀態
• none：預設值，回到動畫沒開始時的狀態
• forwards：讓動畫停留在結束狀態
• backwards：讓動畫回到第一幀的狀態
• both: 根據animation-direction（見後）輪流應用forwards和backwards規則
• animation-direction動畫迴圈的方式
• normal預設值
• alternate
• reverse

• alternate-reverse
  具體參照下圖

  
  
  

  animation-direction.png
  
  

  常用的值是normal和reverse。瀏覽器對其他值的支援情況不佳，應該慎用。

動畫語法

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
// 相當於
div:hover {
  animation-name: rainbow;
// 動畫名稱
  animation-duration: 1s;
// 持續時間
  animation-timing-function: linear;
// 動畫狀態
  animation-delay: 1s;
// 動畫延遲
  animation-fill-mode:forwards;
// 動畫結束狀態
  animation-direction: normal;
// 動畫迴圈方式
  animation-iteration-count: 3;
// 動畫迴圈次數，設為infinite則為無限迴圈
}

steps函式

用於實現逐幀動畫

div:hover {
 animation: 10s rainbow infinite steps(10,start);
}
動畫將被分成10幀來播放，而不是平滑過渡。第二個引數預設為end，可設定為start。

效果參照

動畫暫停

animation-play-state

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}