Performant CSS3 animation (Simple animation still not performant in Chrome Developer Tools)

I have been playing around with ytour demo, and I found 2 issues:

First, changing from translate to translate3d improves (at least in my system) a little bit the performance. So, writing this

@keyframes moveToRight {    from {     transform: translate3d(0%, 0px, 0px);  }    to {     transform: translate3d(100%, 0px, 0px);  }}

is better. (This has been told several times before, but it is always good to check).

Also, a new property should help somewhat . setting

will-change: transform;

should prepare the browser for a future change in this property. But I haven't been able to see any difference.

Second, there seems to be a problem in the way Chrome gathers statistics.You have "Screenshots" enabled. And this seems to be the main cause of the delays, the time that Chrome needs to render and store the screenshots.

By definition, the time needed by a performance tool to do its work shouldn't be computed in the analysis. But this doesn't seem to be the case here... I would say this is a bug.

At least in my case, changing both issues makes the red markers almost disappear

And, in the remaining marked frames, there doesn't seem to be any performance issue. Notice in the screenshot that the frame duration is 25.57 ms long, but the CPU time is 1.239 ms .