利用@keyframe及animation做一個頁面Loading時的小動畫

前言

利用@keyframe規則和animation常用屬性做一個頁面Loading時的小動畫。

1  @keyframe規則簡介

• @keyframes定義關鍵幀，即動畫每一幀執行什么。
  
  要使用關鍵幀, 先創建一個帶名稱的@keyframes規則，以便后續使用 animation-name 這個屬性來調用指定的@keyframes. 每個@keyframes 規則包含多個關鍵幀，也就是一段樣式塊語句，每個關鍵幀有一個百分比值作為名稱，代表在動畫進行中，在哪個階段觸發這個幀所包含的樣式。 關鍵幀的編寫順序沒有要求，最后只會根據百分比按由小到大的順序觸發。

• 語法

  @keyframes <identifier> {
    [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
  }
  
  <identifier>
  幀列表的名稱。 名稱必須符合 CSS 語法中對標識符的定義。
  from
  等效於 0%.
  to
  等效於 100%.

• 注意⚠️：@keyframes 不能在內聯樣式中使用

2  animation常用屬性簡介

• animation定義動畫每一幀如何執行。
  該屬性允許配置動畫時間、時長以及其他動畫細節，但該屬性不能配置動畫的實際表現，動畫的實際表現是由 @keyframes規則實現。
• animation的屬性

  1 animation-delay
  設置延時，即從元素加載完成之后到動畫序列開始執行的這段時間，單位一般為秒（s）或毫秒（ms），若為負值表示跳過前幾秒執行。
  2 animation-direction
  設置動畫在每次運行完后是反向運行還是重新回到開始位置重復運行。

  • normal：默認值，動畫按正常播放;

  • reverse：動畫反向播放;

  • alternate：動畫在奇數次正向播放，在偶數次反向播放；

  • alternate-reverse：動畫在奇數次反向播放，在偶數次正向播放；

  • initial：設置該屬性為它的默認值；

  • inherit：從父元素繼承該屬性。

  3 animation-duration
  設置動畫一個周期的時長。
  4 animation-iteration-count
  設置動畫重復次數， 可以指定infinite無限次重復動畫
  5 animation-name
  指定由@keyframes描述的關鍵幀名稱。
  6 animation-play-state
  允許暫停和恢復動畫。
  

  • paused：指定動畫暫停；

  • running：指定動畫運行；

  7 animation-timing-function
  設置動畫速度， 即通過建立加速度曲線，設置動畫在關鍵幀之間是如何變化。
  8 animation-fill-mode
  指定動畫執行前后如何為目標元素應用樣式。

   

3 實例：一個頁面Loading時的小動畫

• 點擊此處查看動畫效果
• 代碼如下

  /*一個loading動畫*/
  /*@keyframes規則*/
  @keyframes pageLoading{     /*用“0%-100%”或者“from-to”都可以*/
      from{
          width: 0px;height: 0px; opacity: 1;      /*漸變改變寬度和高度，並且設置opacity,使顏色越來越淡*/
      }
      to{
          width: 100px;height: 100px;opacity: 0;
      }
  }
  /*畫一個頁面居中的圓形*/
  .loading{
      width: 400px;
      height: 400px;
      position: relative;
  }
  .loading:before,
  .loading:after {
      position: absolute;      /*一定要絕對定位，不然不會出現*/
      content: '';
      width: 0px;
      height: 0px;
      border-radius: 50%;
      top: 0;bottom: 0;left: 0;right: 0;margin:auto;  /*元素頁面居中，一定要將上下左右的值設置為0*/
      background: rgb(71, 71, 71);
      animation: pageLoading 1s linear infinite;   /*動畫漸變變大，linear infinite讓動畫不斷漸變不要停*/
  }
  /*現在我們需要讓后一個圓比前一個圓后漸變*/
  .loading:after{
      animation-delay: 0.5s;
  }