前端課程——動畫

動畫

什麼是動畫

CSS3新增animation 屬性使得僅通過CSS的樣式屬性實現動畫效果成為可能。實現動畫包括兩個部分：

  • 用於定義動畫的樣式規則
  • 用於設置動畫開始、結束以及中間點樣式的關鍵幀相對於傳統使用JavaScript實現的動畫方式，CSS3 新增的animation屬性具有以下三個優點:
    • 能夠非常容易地創建簡單動畫，甚至不需要掌握JavaScript。
    • 動畫運行效果良好，可以在低性能的系統運行。性能以及流暢程度都優於JavaScript實現畫效果。
    • 允許瀏覽器優化動畫的性能和效果，讓瀏覽器控制動畫序列。

定義動畫序列

@keyframes聲明動畫

通過使用@keyframes建立兩個或兩個以上關鍵幀來實現。每一個關鍵幀都描述了動畫元素在給定的時間點上應該如何渲染。

@keyframes <keyframes-name>{      <keyframe-block-list>  }
  • keyframes-name 用於設置當前動畫的名稱，以便通過animation-name屬性調用。
  • keyframe-block-list 用於設置動畫執行過程中的關鍵幀。

實現動畫

動畫執行完成後回歸原始狀態且不需要觸發條件。

  1. 設置關鍵幀動畫的名稱（至少要包含兩個 開始和結束） 其中過程的關鍵字(from、to)可用百分比替換 @keyframes animate{ from{ width: 200px; height: 200px; } to{ width: 400px; height: 400px; } }
  2. 通過animation相關屬性實現動畫效果 .box{ width: 200px; height: 200px; background: lightcoral; /* 設置執行動畫的名稱 與關鍵幀對應 */ animation-name: animate; /* 動畫執行的時間 */ animation-duration: 2s; } 以上兩個子屬性可簡寫為一個屬性 animation: animate 2s;

多個動畫

如果設置多個動畫，名稱、時間需用逗號分隔。

animation-name: animate1,animate2;  animation-duration: 1s,4s;

動畫執行的次數

animation-iteration-count屬性控制。

.box {      width: 200px;      height: 200px;      background: lightcoral;      animation-name: animate;      animation-duration: 1s;      /* infinite表示永久執行  可設置整數 也可設置小數：會執行一段就結束 */      animation-iteration-count: infinite;      /*      animation-iteration-count: 2;      animation-iteration-count: 2.3;      */  }

動畫執行的方向

/* 每個循環內動畫向前循環 即 動畫循環結束後回到起點重新開始 默認值 */  animation-direction: normal;  /* 動畫交替反向運行，反向運動時，動畫起步後退，同時，帶時間功能的函數也反向。 */  animation-direction: alternate;  /* 反向運動動畫，每周期結束動畫由尾到頭運行 */  animation-direction: reverse;  /* 反向交替，反向開始交替 動畫第一次運行時是反向的， 然後下一次是正向，後面依次循環。 */  animation-direction: alternate-reverse;

測試的次數均為無限次。

  • normal 默認值 每個循環內動畫向前循環 即 動畫循環結束後回到起點重新開始
  • alternate 動畫交替反向運行，反向運動時，動畫起步後退，同時，帶時間功能的函數也反向。
  • reverse 反向運動動畫，每周期結束動畫由尾到頭運行
  • alternate-reverse 反向交替，反向開始交替 動畫第一次運行時是反向的， 然後下一次是正向，後面依次循環。

動畫執行的狀態

/* 運行 */  animation-play-state: running;  /* 暫停 */  animation-play-state: paused;

設置動畫時間外屬性

animation-fill-mode:屬性用於設置動畫執行之前和執行之後如何為動畫的目標元素應用樣式。

此屬性可設置的值為：

  • none

不改變默認行為。

  • forwards

當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。

  • backwards

在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）

  • both

向前和向後填充模式都被應用。

VirMach 便宜 VPS

QNews

QNews