Open In App
Related Articles

CSS will-change property

Improve Article
Improve
Save Article
Save
Like Article
Like

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>GeeksforGeeks</h1
        <h4>CSS | will-change property</h4
        <div
            <img class="left" src
                alt="Sample image"
            <img class="right" src
                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+

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
Previous
Next
Similar Reads
Complete Tutorials