【面試】CSS動畫之transition和animation屬性整理和實例

參考：阮一峯的文章

CSS實現動畫主要有兩種方法：transition和animation屬性。

transition

transition`實例

先看一個transition實現長度拉伸的例子：

#transition-demo {
      height: 100px;
      background-color: yellowgreen;
      transition: height 1s 0.5s ease-out; // 定義過渡規則
    }
    #transition-demo:hover {
      height: 200px;
    }
    
<div id="transition-demo">
  transition例子，鼠標懸停試試
</div>
複製代碼

transition經常使用屬性

• transition-property: height; // 適用於哪一個屬性

• transition-duration: 1s;

• transition-delay: 1s;

• transition-time-function: ease/linear/ease-in(加速)/ease-out/cubic-bezier(自定義)；

transition特性

1. 須要具體數值，不能用block,none等

2. transition需用事件觸發，不能在網頁加載時自動發生

3. 一次性，不能重複發生，除非一再觸發

4. 只有兩個狀態：開始和結束狀態

5. 一條transition規則只能定義一個屬性

animation

CSS animation就是爲了上面這些問題而提出的。animation是一個很是成熟的能夠用來展示動畫效果的屬性。

animation實例

先看一個動畫播放顏色漸變、鼠標懸停暫停播放的例子：

#animation-demo {
      height: 200px;
      animation: 3s type forwards alternate infinite; // 動畫效果的規則
      animation-play-state: running;
    }

    #animation-demo:hover {
      animation-play-state: paused;
    }

    @keyframes type {
      from {background: yellowgreen}
      50% {background: yellow}
      to {background: aquamarine}
    }
    
<div id="animation-demo">
  animation例子，鼠標懸停試試
</div>
複製代碼

animation經常使用屬性

• animation-name: rainbow;

• animation-duration: 1s;

• animation-timing-function: ease-in-out;

• animation-delay: 1s;

• animation-fill-mode(動畫停留在): none(動畫沒開始時)/forwards(結束)/backwards(第一幀)/both;

• animation-direction(動畫播放方向): normal(正向)/alternate(交替慎用)/reverse(反向)/alternate-reverse(反向交替慎用);

• animation-iteration-count(播放次數): 3/infinite(無限);

• steps(10)函數實現分步過渡

• animation-play-state(用於讓動畫保持忽然終止時的狀態):running(例如懸停時播放)/paused(非懸停時暫停)； 注意這個屬性不能簡寫