Smooth animation on js, css?

Question

css

Good afternoon!
Made an animation of the appearance / hiding of blocks on css + js (appearance / hiding through scale, moving through changing the value of left and top) - maxborsu.bget.ru/gg (Gallery section). But when moving, the pictures "twitch". I tried to change the speed, the effect is the same...
preview.themeforest.net/item/delicieux-exquisite-r... - almost the same is done here, only the position change is done through translate, but here the animation is smooth.
What could be the problem?

Answer 1

You answered your own question. Animation via position changes via top, left, etc. considered bad practice. Read more here

Answer 2

The problem is that the movement for smoothness must be done using translate. If left/right is desperately needed, then the following rules can be added to the style of the element (better all at once to support all sorts of safari and different versions of chrome):

.animatedElem {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   
   /* пишут, что работает лучше чем translateZ на мобилках */
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

Answer 3

Yes, that's right, only translate should be used for animations, as it is easy for devices to optimize it and it eats less resources. Don't forget about will-transform.