I had the same approach as this. But not all animations can be made using the transform property, and even if you avoid reflows you can still have a lot of CPU usage with simple animations. In our case, we were moving a gradient inside a div. You wouldn't think this uses a lot of CPU, but if you have enough of them, it becomes a problem - there is apparently a lot of CPU processing involved in re-rendering regardless of reflow. Using the translateZ(0) trick did not eliminate the issue.

In my experience, you really need to work with designers who are willing to consider the technical impacts of design choices within the browser. You need to be able to say, this animation style causes strangeness and performance impacts... are their other designs that don't have the same technical needs and still achieve our product goals? The coder needs to be willing to understand the design constraints and the designer needs to be willing to understand the code constraints and both people need to take joy in finding solutions that tick every box.

If you have a "throw the designs over the wall" workflow, CSS will never work, you have to go to iOS or Unity or something like that where you have minute control over every detail. On some level, this becomes an identity issue... are you Mercedes, or Apple, who will marshal incredible resources to control every detail of a production, or are you a Craigslist, or Bikini Kill, who will sacrifice any and every technical consideration to maintain laser focus on a singular goal.

Put another way, are you the conqueror who flattens an entire ecosystem to build your perfect palace, or a craftsperson who takes a small amount of material each day, and makes something beautiful within the constraints?