Should I use transform along with will-change property-CodePudding

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 >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 >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?

CodePudding user response：