Open In App
Related Articles

CSS will-change property

Improve Article
Save Article
Like Article

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. 


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. 


<!DOCTYPE html> 
        CSS | will-change property 
        h1 { 
            color: green; 
            will-change: transform;
            transition: 1s;
        .left:hover { 
            transform: rotateX(45deg); 
        <h4>CSS | will-change property</h4
            <img class="left" src
                alt="Sample image"
            <img class="right" src
                alt="Sample image"



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+

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 06 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials