Question

为了在5秒后隐藏元素，我使用了下面的代码。

但它在Firefox中不起作用。

＆＃13;

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

＆＃13;

Answer 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;
    }
}

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

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

此解决方案的优点：

所有浏览器的行为都相同。
隐藏文字无法选择。

缺点：

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

Answer 2

尝试使用固定的width和height为您的阻止（%或px）和opacity代替visibility - {{ 3}}：

.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;
    }
}

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

2 个答案: