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

- Helmut

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;

- Banana

Answer 2

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

- rob