CSS动画仅在显示引导模式后应用

我注意到，当使用时，如果我在模态中为元素设置了CSS动画，那么这些动画直到模态显示之后才会应用。这实际上很棒，但我不知道是什么触发了动画。更重要的是，如果我关闭模式并重新打开。动画将重置并再次运行

我很确定这是一个引导程序，但是我找不到任何关于这个的文档

我对此感兴趣的原因是，我想通过重新运行动画来利用这一点。如果可能的话，尝试连接到现有的引导函数也是有意义的。（我只是好奇）

• 这真的是一个引导的“特性”吗
• 或者这是一个CSS的东西 在显示元素之前不应用动画

。为长方体设置动画{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
动画名称：示例；
动画持续时间：3s；
动画延迟：0s；
动画填充模式：两者都有；
}
@关键帧示例{
从{
背景颜色：黄色；
}
到{
背景颜色：蓝色；
}
}

启动演示模式

请参阅（感谢@TemaniAfif的链接）

将“显示”属性设置为“无”将终止应用于元素及其子体的任何正在运行的动画。如果某个元素的“显示”为“无”，则将“显示”更新为“无”以外的值将启动通过“动画名称”属性应用于该元素的所有动画，以及应用于显示为“无”以外的子体的所有动画

input+label:before{content:'Show'}
输入：选中+标签：在{content:'Hide'}之前
输入：选中~.动画框{显示：块}
.为长方体制作动画{
显示：无；
宽度：100px；
高度：100px；
背景颜色：黄色；
动画：示例3s和3s；
}
@关键帧示例{
到{
背景颜色：蓝色；
}
}

与规范中的解释相关：您是否知道是否在任何地方记录了这一点？（背后的“为什么”）