在5秒钟后隐藏一个元素，只有CSS在Firefox上不起作用

Question

为了在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>

Answer 1

上面的代码有一些问题：

• 并非所有浏览器的动画都是一样的：一个是为visibility(webkit)设置动画，另一个是对overflow(标准)设置动画
• overflow属性不可设置动画
• Firefox有visibility属性问题的历史(这不是你的错，而是Firefox本身的问题，你可以在SO上找到许多与之相关的问题)

由于运行动画的方式(持续时间为0s)，您可以在CSS动画中使用from来欺骗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秒，则此解决方案将不起作用；但由于更改是自动的，所以它运行良好(不会影响其他浏览器)。

---

此解决方案的优点：

• 所有浏览器的行为都是相同的
• 隐藏的文本不可选择

缺点：

• 这是一个变通方法，而不是应该如何做
• 如果效果的持续时间大于0s，则不起作用

Answer 2

尝试为块使用固定的width和height(在%或px中)，并使用opacity而不是visibility——http://jsfiddle.net/sergdenisov/wek6x4Ln/11/:

.classname {
width: 200px;
height: 50px;
-webkit-animation: css-animation 0s ease-in 5s forwards;
animation: css-animation 0s ease-in 5s forwards;
}
@-webkit-keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
@keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}