html - Div 在 CSS 动画后被隐藏

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;