为何修改元素display属性后CSS动画仍可复用？

核心原因很简单：当元素从display: none切换为可见状态（比如display: block）时，浏览器会把元素重新加入渲染树，触发一次完整的样式重计算与重绘，绑定在元素上的CSS动画会从头开始执行。

结合你的代码具体分析：

• 初始状态下aside是display: none，这时候元素完全脱离DOM渲染树，哪怕你写了animation: openit 800ms ease-in forwards，动画也根本不会启动——因为浏览器不会对不在渲染树里的元素执行动画逻辑。
• 当你用JS把aside的display改成可见值（比如block），元素被重新纳入渲染树，浏览器会先应用它的初始样式（left: -100%），然后触发动画从初始状态过渡到@keyframes openit定义的最终状态（left: 0）。
• 之后如果再把display切回none，元素再次脱离渲染树，动画会被重置；等你再切回可见状态，整个流程又会重复一遍，动画自然就“复用”了。

额外补充两个关键细节：

• 和visibility: hidden不同，visibility只是隐藏元素，但元素还在渲染树里，动画不会被重置，所以切换visibility不会重新触发动画；而display: none是彻底移除元素的渲染状态，每次显示都是一次“全新启动”。
• 你的动画用了forwards，这只会让动画结束后保留最终状态，但不影响下次显示时的动画触发——因为重新显示时，浏览器会先把元素样式重置回初始的left: -100%，再启动动画。

内容的提问来源于stack exchange，提问作者Can Yetgin