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+
Share your thoughts in the comments
Please Login to comment...