利用@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;
  }