Question

我在CSS3页面加载时有一个延迟动画。一切正常，但在动画完成后，DIV会回到visibility: hidden。

.content-left {
    margin-left: 100px;
    margin-top: 32px;
    position: absolute;
    z-index: 1; 
    visibility: hidden;
    -webkit-animation: fadein 1s 2s ease; /* Safari and Chrome */
    animation: fadein 1s 2s ease;
}

@keyframes fadein {
from { height: 0px; }
to   { height: 421px; visibility: visible;} }

@-webkit-keyframes fadein {
from { height: 0px; }
to   { height: 421px; visibility: visible;}}

Answer 1

这是因为一旦动画完成，它将恢复为原始样式。

然而，您可以指导动画在完成播放后保留动画的最后一帧，称为Animation Fill Mode

animation-fill-mode: forwards; - 将保留动画的最后一帧 animation-fill-mode: backwards; - 将保留动画的第一帧。

或者您可以将forwards添加到动画声明中：

-webkit-animation: fadein 1s 2s ease forwards; /* Safari and Chrome */
animation: fadein 1s 2s ease forwards;

Answer 2

设置animation-fill-mode: forwards，这样它就不会回到动画的第一阶段。

在CSS动画后，Div被隐藏起来

2 个答案: