利用CSS Animation實現元素跳動效果

一、什麼是CSS Animation？

CSS Animation是CSS3新引入的特性，它能夠實現在網頁中以動畫的形式呈現出各種不同的效果。通過定義關鍵幀，我們可以讓一個元素在一段時間內從始至終發生某種變化，比如移動、旋轉、縮放等。

二、如何使用CSS Animation實現元素跳動效果？

使用CSS Animation實現元素跳動效果，是通過定期改變元素的位置、大小等屬性值達到的。我們可以定義關鍵幀，設置元素在不同的時間點應該擁有的不同外觀，再讓CSS運用線性插值技術，平滑的過渡過程中任意兩個關鍵幀的值。以下是一個簡單的例子：

.animation {
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: red;
  animation-name: jump;
  animation-duration: 1s;
  animation-iteration-count: infinite; 
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px); 
  }
}

以上代碼表示，一個尺寸為50x50px的紅色方塊會無限次的在1秒內向上移動100px，再返回原位置。這是通過定義兩個關鍵幀來實現的，一個是from，表示元素在動畫開始時的狀態，即不偏移；另一個是to，表示元素在動畫結束時的狀態，即向上偏移100px。中間的過程則會通過CSS Animation自動完成。

三、如何實現動態變化的元素跳動效果？

上面的例子中，元素的跳躍高度、速度、頻率等都是固定的，很難實現一些更加生動、有趣的效果。實現動態變化的元素跳動效果，我們需要使用多個關鍵幀，隨機生成元素的各種屬性值，達到類似於物理模擬的效果。以下是一個稍微複雜一些的例子：

.animation {
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: red;
  animation-name: jump;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes jump {
  0% {
    transform: translateY(0) scale(1) rotate(0);
  }
  25% {
    transform: translateY(-80px) scale(0.8) rotate(-20deg); 
  }
  50% {
    transform: translateY(-140px) scale(1.2) rotate(20deg); 
  }
  75% {
    transform: translateY(-80px) scale(0.8) rotate(-20deg); 
  }
  100% {
    transform: translateY(0) scale(1) rotate(0); 
  }
}

以上代碼表示，一個尺寸為50x50px的紅色方塊會不斷的跳躍，高度位置、大小、旋轉角度隨機變化。我們定義了5個關鍵幀，分別對應元素在動畫的不同時間點上，所具有的不同屬性值。25%的關鍵幀代表元素跳起來到了一半，此時元素會變小，並向左旋轉一定角度；50%的關鍵幀代表元素跳到了最高點，此時元素會變大，並向右旋轉一定角度；75%的關鍵幀代表元素開始下落，此時元素會變小，並向左旋轉一定角度；100%的關鍵幀代表元素回到了原點。這樣定義了多個關鍵幀後，CSS Animation會根據這些關鍵幀來自動計算屬性值的中間過渡。

四、使用CSS Animation需要注意什麼？

雖然CSS Animation非常強大，但是我們在使用它時需要注意以下幾點：

1、性能問題：CSS Animation是以幀為單位的動畫，如果幀數過多或關鍵幀的變化過於複雜，會極大的消耗瀏覽器的性能，影響網頁的載入速度和用戶體驗。我們需要在性能和效果之間加以權衡，儘可能的避免過度的動態效果，尤其是在移動設備上。

2、兼容性問題：CSS Animation仍然是一個比較新的技術，存在一定的兼容性問題，比如IE8及以下瀏覽器不支持。為了保證在不同的瀏覽器中都能夠正常顯示動畫效果，我們需要編寫適當的兼容性代碼，並進行充分的測試。

3、可讀性問題：由於CSS Animation通常會引用大量的關鍵幀，其中很多屬性值是重複的，這樣會極大的影響CSS代碼的可讀性和維護性。我們應該儘可能的利用縮寫、繼承等技術，合理的組織CSS代碼。

五、總結

CSS Animation是一項非常有用的技術，可以幫助我們實現網頁中豐富多彩的動態效果。通過定義關鍵幀，我們可以讓元素在不同的時間點上擁有不同的樣式，從而實現各種不同的動畫效果。但是在使用CSS Animation時需要注意性能、兼容性和可讀性等問題，合理地組織CSS代碼，避免過度的動態效果，才能達到更好的效果。

完整代碼示例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Animation示例</title>
  <style>
    .animation {
      position: absolute;
      height: 50px;
      width: 50px;
      background-color: red;
      animation-name: jump;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    
    @keyframes jump {
      0% {
        transform: translateY(0) scale(1) rotate(0);
      }
      25% {
        transform: translateY(-80px) scale(0.8) rotate(-20deg); 
      }
      50% {
        transform: translateY(-140px) scale(1.2) rotate(20deg); 
      }
      75% {
        transform: translateY(-80px) scale(0.8) rotate(-20deg); 
      }
      100% {
        transform: translateY(0) scale(1) rotate(0); 
      }
    }
  </style>
</head>
<body>
  <div class="animation"></div>
</body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/198334.html