Will "be changed" or "translateZ () hack any performance into" transition: height ",

Question

I create an accordion with an animated height on the open / close, in which the height of the content is calculated via JS. I want to provide better performance, so I was thinking about forced hardware acceleration.

.accordion-item-content {
    overflow: hidden;
    transition: height .3s ease;
    transform: translateZ(0);
    will-change: transform;
}

In Chrome Dev Tools, I see that accordion elements get each layer (due to the change and / or transform property), but will this increase performance? Or transform, opacity and filter the only properties that can ever benefit from GPU rendering, as I understood here: http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

Another question: “Will it be changed: height” do anything? It looks valid ( https://developer.mozilla.org/en-US/docs/Web/CSS/will-change ), but it does NOT create a layer that I can observe in dev tools.

Answer 1

Not really will-changeor transform: translateZ()will push your element to its own layer, which is sent to your GPU. See https://csstriggers.com/ . You should only animate transformand opacity. Any other properties cause a redraw or recount of the layout, even if you use will-change.