CSS关键帧未在100%标记处应用最后一个规则集

以下CSS动画未应用最后一条规则：

display:none。我做错了什么


setTimeout（函数（）{
$（'.to hide'）.addClass（'hidden'）；
}, 2000);
@-webkit关键帧淡出{
0%{不透明度：1；}
99%{不透明度：0；}
100%{显示：无；}
}
@-moz关键帧淡出{
0%{不透明度：1；}
99%{不透明度：0；}
100%{显示：无；}
}
@-o关键帧淡出{
0%{不透明度：1；}
99%{不透明度：0；}
100%{显示：无；}
}
@关键帧淡出{
0%{不透明度：1；}
99%{不透明度：0；}
100%{显示：无；}
}
div{
浮动：左；
宽度：100%；
高度：20px；
明确：两者皆有；
背景颜色：蓝色；
}
.隐藏{
背景色：红色；
}
.隐藏{
-webkit动画名称：淡出；
-moz动画名称：淡出；
-o-animation-name：淡出；
动画名称：淡出；
-webkit动画持续时间：0.8s；
-moz动画持续时间：0.8s；
-o-动画持续时间：0.8s；
动画持续时间：0.8s；
-webkit动画计时功能：轻松输入输出；
-moz动画计时功能：轻松输入输出；
-o-动画-计时-功能：轻松输入输出；
动画计时功能：轻松进出；
-webkit动画填充模式：正向；
-moz动画填充模式：正向；
-o-动画-填充模式：正向；
动画填充模式：正向；
}
看起来你的动画是从0%开始到100%，然后重新开始。如果您想让它只运行一次，而不是像现在这样不连续运行，请尝试添加：

animation-iteration-count: 1;

如果这不起作用，我还怀疑您不能添加
display:none到css3关键帧，改为添加不透明度：0；100%。
我想您希望在动画结束时设置
display:none
，以从显示列表中删除项目并释放它们占用的空间

因此，您不能在关键帧动画中设置显示。您可以使用每个css动画在结束时触发的
animationend
事件，并在事件处理程序中设置
display:none

示例（js代码段）：

假设您有一个额外的css类选择器：

.display-none {
  display: none;
}

但是，是的，它添加了javascript，而不仅仅是css

您还可以使用
scale
属性来解决仅css的问题。
请参见此图。
由于无法对过渡或动画使用
显示：无
，因此可以通过设置div高度的动画来模拟过渡或动画

HTML

<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div></div>


setTimeout（函数（）{
$（'.to hide'）.addClass（'hidden'）；
}, 2000);
div{
浮动：左；
宽度：100%；
高度：20px；
明确：两者皆有；
背景颜色：蓝色；
}
.隐藏{
背景色：红色；
}
.隐藏{
动画：淡出0.8秒缓进缓出向前；
}
@关键帧淡出{
0% {
不透明度：1；
}
99% {
不透明度：0；
}
100% {
身高：0；
}
}

显示
不能设置动画，也不能转换。我知道，我不想设置动画或转换，我想应用
显示：无
动画完成后，仅使用CSSOkay让我重写它：
display
属性不能是动画或过渡的一部分。它不是无限运行的，
display:none只是被关键帧忽略，这很糟糕：）
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div></div>

div {
   float: left;
   width: 100%;
   height: 20px;
   clear: both;
   background-color: blue;
}

.to-hide {
   background-color: red;
}

.hidden {
   animation: fade-out 0.8s ease-in-out forwards;
}

@keyframes fade-out {
   0% {
     opacity: 1;
   }
   99% {
     opacity: 0;
   }
   100% {
     height: 0;
   }
}