仅在 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

尝试使用固定的 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;
    }
}

Answer 2

上面的代码有一些问题：

所有浏览器的动画都不一样：一个是 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;
    }
}

<div class="classname">This will hide</div>

如果动画的时长大于0秒，这个方案就不行；但由于更改是自动的，所以它工作正常（并且不会影响其他浏览器）。

该方案的优点：

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

缺点：

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

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

Hide an element after 5 seconds only CSS does not work on Firefox

css

css-transitions

css-animations