为了在5秒钟后隐藏元素，我使用了以下代码。
但它在Firefox中不起作用。
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}<div class="classname">This will hide</div>上面的代码存在一些问题：
visibility（webkit），另一种是动画化overflow（标准）。overflow属性不可动画。visibility属性的历史记录（这不是您的错，而是Firefox本身的问题，您可以在与之相关的SO上找到许多问题）。由于运行动画的方式（持续时间为0s），可以通过from在CSS动画中使用来欺骗Firefox 。事实是Firefox不会对进行动画处理visibility，但是from无论如何它都会在动画的一部分中应用样式，因此您将获得所需的效果。
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
@-webkit-keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}<div class="classname">This will hide</div>如果动画的持续时间大于0秒，则此解决方案将不起作用；否则，此方法将无效。但由于更改是自动进行的，因此效果很好（并且不会影响其他浏览器）。
该解决方案的优点：
缺点：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句