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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。