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

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: forwards; - 将保留动画的最后一帧.
animation-fill-mode: backwards; - 将保留动画的第一帧.

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

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