'Should I use transform along with will-change property
When we use properties: transform plus transition, browser creates new layer for compositing when it does animation; you can test the following code:
.newLayer{
width:150px;
height:150px;
background-color: red;
transform: translate(0, 0);
transition: all 1s ease;
}
.newLayer:hover{
transform: translate(100px, 0);
}
<div class="newLayer">I am new Layer</div>
Also you can use will-change property for some optimization. It is also creates new layer in the browser:
.newLayer{
width:150px;
height:150px;
background-color: red;
will-change: transform;
transform: translate(0, 0);
transition: all 1s ease;
}
.newLayer:hover{
transform: translate(100px, 0);
}
<div class="newLayer">I am new Layer</div>
I have heard that you should use will-change for optimization if you use animation in your project. Also I read that you should use wisely this property, I mean you shouldn't apply it to everything what you see and you should add it before animation and remove after.
If I use transform and transition, should I add will-change. If you will answer yes, explain why.
By the way, if will-change makes optimizations, tell me which ones optimizations it does?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
