仅在 5 秒后隐藏元素 CSS 在 Firefox 上不起作用答案

【问题标题】：Hide an element after 5 seconds only CSS does not work on Firefox仅在 5 秒后隐藏元素 CSS 在 Firefox 上不起作用
【发布时间】：2015-05-11 22:11:34
【问题描述】：

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

&lt;div class="classname"&gt;This will hide&lt;/div&gt;

【问题讨论】：

感谢您的代码在 chrome 中适用于我，您的问题的解决方案在 Firefox 中适用于我...非常感谢。

标签： css css-transitions css-animations

【解决方案1】：

上面的代码有一些问题：

所有浏览器的动画都不相同：一种是动画visibility（webkit），另一种是动画overflow（标准）。
overflow 属性为 not animatable。
Firefox 有关于 visibility 属性的问题的历史记录（这不是你的错，而是 Firefox 本身的问题，你可以找到许多与它相关的 SO 问题）。

由于您运行动画的方式（持续时间为 0），您可以通过在 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;
    }
}

&lt;div class="classname"&gt;This will hide&lt;/div&gt;

如果动画的持续时间高于 0 秒，则此解决方案不起作用；但由于更改是自动的，因此可以正常工作（并且不会影响其余浏览器）。

此方案的优点：

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

缺点：

这是一种解决方法，而不是应该如何做。
效果持续时间大于 0s 时无效。

【讨论】：

【解决方案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;
    }
}

【讨论】：