Yes, animations will restart every time the display
value is changed from none
to something else.
As per W3C Spec: (emphasis is mine)
Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.
There is no direct way to prevent this from happening because that is the intended behavior. You can workaround the situation by using other methods to hide the element instead of using display: none
.
Following are a few suggestions on how the element could be hidden without display: none
. It is not mandatory to use only one of the following workarounds, it could be some other way also as long as it doesn't involve changing the display
property of the element.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…