Reduce CSS layout and repaint for variable font animation

Question

I'm trying variable font animation following this tutorial. However, I have noticed a heavy CPU overhead in this animation (especially in rendering):

Comparing with a similar benchmark result but with transform animation:

So if it's possible to layout and repaint for variable font animation such that this animation can have much better performance?

Here is an example:

@font-face {
  font-family: "IBM Plex Sans Roman";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}

.animation {
  width: 8rem;
  margin: 0 auto;
  font-family: "IBM Plex Sans Roman";
  font-size: 8rem;
  font-variation-settings: 'wght' 100, 'wdth' 85;
  text-align: center;
  animation: breathe 4000ms infinite both;
}

@keyframes breathe {
  0% {
    font-variation-settings: 'wght' 100, 'wdth' 85;
  }

  60% {
    font-variation-settings: 'wght' 700, 'wdth' 100;
  }

  100% {
    font-variation-settings: 'wght' 100, 'wdth' 85;
  }
}

<div class="animation">G</div>

Answer 1

There's no way to address the underlying problem, as that's up to the browser. One workaround is to animate in steps, and find a value that's low, but still produces a smooth animation:

animation: breathe 4000ms infinite both steps(40);

This will produce a maximum of 40 "versions" of your font for all keyframes, as opposed to possible thousands.