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

For hiding an element after 5 seconds, I have used below code.

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

But it does not work in Firefox.

但它在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>

2 个解决方案

#1

There are some issues with the code above:

上面的代码存在一些问题:

The animation is not the same for all browsers: one is animating the visibility (webkit), the other one is animation the overflow (standard).

所有浏览器的动画都不一样:一个是动画可见性(webkit),另一个是动画溢出(标准)。

The overflow property is not animatable.

溢出属性不可动画。

Firefox has a history of issues with the visibility property (this is not your fault but a problem of Firefox itself, you can find many questions on SO related to it).

Firefox有关于可见性属性的问题的历史(这不是你的错,而是Firefox本身的问题,你可以在SO上找到很多关于它的问题)。

Because of the way in which you are running the animation (with a duration of 0s), you can trick Firefox by using the from in the CSS animation. The thing is that Firefox is not animating the visibility, but it will apply the style in the from part of the animation anyway, so you'll get the desired effect.

由于运行动画的方式(持续时间为0),您可以使用CSS动画中的from来欺骗Firefox。问题是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 {
    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>

If the duration of the animation was higher than 0 seconds, this solution wouldn't work; but as the change is automatic, it works fine (and it will not affect the rest of the browsers).

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

The advantages of this solution:

这个解决方案的优点:

The behavior is the same in all the browsers.

所有浏览器的行为都是一样的。

The hidden text is not selectable.

隐藏文本无法选择。

The disadvantages:

This is a workaround and not how things should be done.

这是一种解决方法,而不是应该如何完成。

It does not work if the duration of the effect is higher than 0s.

如果效果的持续时间高于0,则不起作用。

#2

Try to use fixed width and height for your block (in % or px) and opacity instead visibility — http://jsfiddle.net/sergdenisov/wek6x4Ln/11/:

尝试使用固定宽度和高度为您的块(%或px)和不透明度而不是可见性 - 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;
    }
}

#1