Html 动画结束后，网格单元不会从布局中消失

当动画结束时，我的底行元素应该消失（因为

display:none

设置为

100%

），但不会发生。为什么?

。下一行{
不透明度：1；
动画：隐藏5s线性0s 1正常向前运行；
}
@关键帧隐藏{
0% {
不透明度：1；
}
95% {
不透明度：0.05；
}
100% {
不透明度：0；
显示：无；
颜色：红色；
字体大小：48px；
}
}

顶行内容
底行内容
第三行内容

您可以使用

高度：0；溢出：隐藏将获得相同的视觉效果：


。下一行{
不透明度：1；
动画：隐藏5s线性向前；
}
@关键帧隐藏{
0% {
不透明度：1；
}
95% {
不透明度：0.05；
}
100% {
不透明度：0；
身高：0；
溢出：隐藏；
颜色：红色；
字体大小：48px；
}
}

顶行内容
底行内容
第三行内容
无法设置显示属性的动画。如果想在动画结束后将其从DOM中删除，则需要使用Javascript。这是一个很好的技巧，而且这似乎是唯一的非Javascript解决方案。