Why Do Webkit Animations Flicker Before a Transform Transition?

Flickering Transitions in Webkit-animations

Question:

Why is there a momentary flicker prior to a Webkit-transform animation using CSS transitions?

Answer:

Cause:
This flicker occurs due to Webkit's handling of the back side of rotated or translated elements during the transition.

Solution:
To eliminate the flicker, add the following line of CSS to your transition:

-webkit-backface-visibility: hidden;

This CSS property hides the back side of the element during the transition, preventing the flicker from being visible.

The above is the detailed content of Why Do Webkit Animations Flicker Before a Transform Transition?. For more information, please follow other related articles on the PHP Chinese website!