CSS will-change property
Last Updated :
06 Jun, 2023
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+
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...