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

Question

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

Answer 1

用visibilitykeyframe 动画不支持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 noeffect 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 willbe visible if they have 'visibility: visible'.意思是说当前元素不可见，但是仍然存在于布局中。以及常见的还有 opacity: 0 和 (width: 0; height: 0; border: 0 none; overflow: hidden;)这几种隐藏方法区别题主可以百度下，很多文章有讲，这里就不赘述了。补充下，动画中实现渐隐一般是用opacity, 因为透明度可以被量化，实现过渡效果。