How to overcome blurry and juddering blocks in CSS3 animations?

Question

css

Is it possible to somehow get rid of blurry and jittery blocks and text during animation (transition, animation). Especially if those blocks have skew and rotate properties?
If the parent has skew or rotate then all animation will blur divs, fonts etc. inside.
Is it possible to deal with this somehow?

Answer 1

try will-change - https://dev.opera.com/articles/en/css-will-change-...

Answer 2

There the problem is that with 3d animation, the browser starts to use the gpu. This is what causes the jerking. To avoid this, it is necessary to apply a transformation to this element in advance, so that when the page loads, it will already be rendered via gpu and this transition will not occur during the animation start and end. You can do this for example through the property transform: translateZ(0); which should be on the element that we are going to transform in the future.

Answer 3

for fonts, I apply anti-aliasing
about blurry divs for the first time I hear

Answer 4

Few data.
Maybe the usual pointer-events: none will help)