Why css animation slows down?

Question

css

The crux of the matter is as follows. The site has a sidebar (a menu that slides out to the right), the animation of which is built on css-transitions. In the inactive state, the sidebar has the following code:

position: fixed;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
width: 300px;
background: #fff;
z-index: 9999;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
transform: translate(300px, 0px);

in the active state, a class with the following code is added to it:

transform: translate(0px, 0px);
opacity: 1;

The problem is that brakes are periodically observed when opening / closing the menu. The Google Chrome profiler does not really give any information what could be the reason for the freezes. It takes only 1-3 ms per animation frame, but the FPS drops to 15-20 frames. Brakes come out periodically (at these moments the whole animation slows down), from the patterns I noticed that they often appear during periods of downtime (when no actions are performed on the site for 20-30 seconds).
I suppose the possible reason is partly in the hardware / software itself (although it is nimble), but I would like to eliminate the freezes (because it will probably not be mine alone). Hence the questions:
1. What could be the reason for such brakes, who faced this?
2. What solutions did you use to make the animation smoother?
PS "will-change: transform;" will not help much, because the browser without it puts everything on a separate layer.

Answer 1

A set of the following actions helped to achieve a smoother animation:
1. The exact property of the transition (ie instead of "transition: all" we specify the specific property with which the animation is performed).
2. The use of class manipulation in JS is not classList, but className. Switching to this solution allowed for real progress in animation fluidity. In particular, this decision was suggested by VK, the same scheme is used there. The className method is included in DOM Core (level 2), has almost complete compatibility with all browsers, and is also more efficiently processed by browser engines with minimal delays.

Answer 2

Perhaps the problem is that the browser has to re-render a lot of elements in the DOM. Try using contain: content.
Native JS, because he's faster.

Answer 3

- will- change should rather be with opacity
here
both in X and Y. While the value of Y does not change. Yuzaite

transform: translateX(200px);
...
transform: translateX(0px);

Of course, this can also be done on pure css with a hidden radio input (the "close" cross - label for=""), but this is quite an extreme measure) All the same, it is more correct to write such an interactive in JS

Answer 4

Dmitry Maslennikov optimize animation.
specify will-change and instead of all at transition list the properties that you will animate, use translate3d instead of translate

Answer 5

vincentgarreau.com/particles.js