Article From:

Excuse me, when the element executes keyframe animation, display:none is set in the execution, then the animation will be suspended. How can he stop it?

Answer 0:

Using visibility
keyframe Animation does not support display:block to display: none

Answer 1:

displayThe switch will trigger reflow, and visibility does not.

Because W3C’s wiki says that the interpretation of display’s none is

This value causes an element to not appear in the document. It has no
effect on layout.

That is, the element display for none will be deleted from the regular stream.

And the explanation for visibility’s none is

The generated box is invisible (fully transparent, nothing is drawn),
but still affects layout. Furthermore, descendants of the element will
be visible if they have ‘visibility: visible’.

This means that the current element is not visible, but it still exists in the layout.

And common opacity: 0 and (width: 0; height: 0; border: 0 none; overflow: hidden);
These different ways of hiding are different from those of Baidu.

In addition, opacity is used to achieve fading in animation, because transparency can be quantified to achieve transitional effects.

Answer 2:

Set display:none; repaint the page, replace it with opacity, or set some structure outside, and display:none hang onto the parent.
Redraw rearrangement:…

Leave a Reply

Your email address will not be published. Required fields are marked *