CSS will-change property

The will-change property is the replacement of animation in few cases, all the animation will look so jumpy a few times when the page took time to load. But in the case of will-change, those animated things will perform smoothly.

Syntax:

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

Property values:

auto: Here the developer should apply whatever heuristics and optimizations it normally does.
<animateable-feature>: Here the developer can define what kind of animation developer want to show.

Example: This example illustrates the will-change property.

HTML

<!DOCTYPE html>  
<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>w3wiki</h1>  
        <h4>CSS | will-change property</h4>  
        <div>  
            <img class="left" src=  
"https://media.w3wiki.net/wp-content/uploads/20190808102629/Beginner15.png"
                alt="Sample image">  
            <img class="right" src=  
"https://media.w3wiki.net/wp-content/uploads/20190808102629/Beginner15.png"
                alt="Sample image">  
        </div>  
    </center>  
<body>  
</html>

Output:

Supported Browsers: The browsers supported by CSS will-change property are listed below:

Google Chrome 36+
Edge 79+
Firefox 36+
Safari 24+
Opera 9.1+

Tags:

#CSS-Properties #CSS #Web Technologies

CSS word-wrap Property

CSS writing-mode Property

CSS will-change property

HTML

Contact Us