css設定按鈕心跳收縮後，按鈕文字上下抖動，如何解決？

蓓蕾心晴發表於2024-03-26
CSS

如題，給一個按鈕寫一個 css 心跳收縮動畫後，按鈕中的文字會上下抖動，解決方案為 will-change: transform;

程式碼如下：

// 按鍵呼吸特效使用 class="pulse"
@keyframes pulse {
  0%{ 
    transform: scale(1);
  }
  25%{ 
    transform: scale(0.95);
  }
  50%{ 
    transform: scale(1);
  }
  75%{ 
    transform: scale(1.05);
  }
  100%{ 
    transform: scale(1);
  }
}

.pulse {
  animation: scale 1.2s infinite linear;
  transform-origin: center center; 
  will-change: transform;
}

will-change: transform; 是CSS中的一個屬性，用於告知瀏覽器該元素將進行哪些樣式的改變。

當一個元素的屬性值改變時，瀏覽器需要重新計算並渲染這個元素，這可能會導致頁面的重繪和重排，從而影響效能。使用 will-change 屬性可以提前告訴瀏覽器哪些屬性可能會發生變化，這樣瀏覽器就可以在變化發生之前進行最佳化，避免不必要的重繪和重排。

然而，需要注意的是，濫用will-change屬性可能會導致效能問題，因為瀏覽器可能會花費資源去準備那些實際上並沒有發生的變化。因此，你應該只在確實知道某個屬性即將變化，並且這種變化對使用者體驗有重要影響的情況下使用它。

此外，一旦元素的變化完成，你應該移除will-change宣告，以避免瀏覽器繼續為不必要的最佳化而消耗資源。

最後，雖然will-change在某些情況下可能有助於提高效能，但它並不是解決所有效能問題的萬能藥。在最佳化頁面效能時，你還應該考慮其他因素，如減少重繪和重排、使用合適的動畫曲線、最佳化圖片和指令碼載入等。

相關文章