当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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