请问元素在执行keyframe动画的时候, 执行中设置display:none, 那么动画会暂停

Question

请问元素在执行keyframe动画的时候, 执行中设置display:none, 那么动画会暂停, 如何让他不暂停呢?

Answer 1

用visibility
keyframe 动画不支持display:block到display: none的

Answer 2

display的切换会触发reflow，而visibility不会。

因为w3c的wiki中写到，display的none的解释是

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

effect on layout.

即display为none的元素会从常规流中删除。

而visibility的none的解释则为

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'.

意思是说当前元素不可见，但是仍然存在于布局中。

以及常见的还有 opacity: 0 和 (width: 0; height: 0; border: 0 none; overflow: hidden;)

这几种隐藏方法区别题主可以百度下，很多文章有讲，这里就不赘述了。

补充下，动画中实现渐隐一般是用opacity, 因为透明度可以被量化，实现过渡效果。