CSS transition animation shake: Why do my elements shake when animation, how to solve it?

CSS transition animation jitter: Cleverly solves the problem of animation lag

When using the CSS transition attribute to create animation effects, you often encounter annoying animation jitter. For example, you want the element to move upwards when the mouse is hovering and achieve a smooth transition through transition :

 margin-bottom: 64px;
transition: margin-bottom 0.3s ease;
will-change: margin-bottom;

However, the actual effect may cause the elements to shake repeatedly at the animation boundary. This is because using margin-bottom with transition , subtle differences in the browser can cause animations to stutter when calculating layouts.

How to avoid animation jitter?

An effective solution is to use transform attribute instead of margin-bottom to achieve element displacement. transform attribute does not trigger the release layout reordering and redrawing, thereby effectively avoiding jitter.

The following code uses transform property to implement the same upward movement animation:

 transform: translateY(-20px); /* Use translateY to be clearer*/
transition: transform 0.3s ease;

By moving the element vertically up by 20 pixels and using transition to control the transition effect of transform , you can achieve smooth animation and completely solve the jitter problem caused by margin-bottom . This feature of the transform attribute makes it the best choice for dealing with such animation jitter problems.

The above is the detailed content of CSS transition animation shake: Why do my elements shake when animation, how to solve it?. For more information, please follow other related articles on the PHP Chinese website!