CSS will-change用法及代碼示例

will-change屬性在少數情況下是替換動畫的原因，當頁麵花費時間加載時，所有動畫看起來都會如此跳動幾次。但是在will-change的情況下，這些動畫效果將很流暢。

用法:

will-change:auto | <animateable-feature>#

屬性值：

auto:在這裏，開發人員應采用通常的啟發式方法和優化方法。
<animateable-feature>：開發人員可以在此處定義開發人員想要顯示的動畫類型。

例：本示例說明了will-change屬性。

<!DOCTYPE hyml>  
<html>  
  
<head>  
    <title>  
        CSS | will-change property  
    </title>  
  
    <style>  
        h1 {  
            color:green;  
        }  
        .left{ 
            will-change:transform; 
            transition:1s; 
        } 
        .left:hover {  
            transform:rotateX(45deg);  
        }  
    </style>  
</head>  
  
<body>  
    <center>  
        <h1>GeeksforGeeks</h1>  
          
        <h4>CSS | will-change property</h4>  
          
        <div>  
            <img class="left" src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
                alt="Sample image">  
  
            <img class="right" src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
                alt="Sample image">  
        </div>  
    </center>  
<body>  
  
</html>

輸出：

支持的瀏覽器：CSS will-change屬性支持的瀏覽器如下：

穀歌瀏覽器
火狐瀏覽器
蘋果瀏覽器
Opera

相關用法

注：本文由純淨天空篩選整理自skyridetim大神的英文原創作品 CSS | will-change property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。