CSS3 动画重置

Question

我刚学了CSS3 Animations，我做了这个淡入淡出的效果，但是一旦动画结束它又回到原来的地方，我怎样才能让它留在原处？

还有动画看起来有点粗糙有没有更好的写法让它看起来更流畅？

.logo {
width: 100%;
height: 100%;
position: relative;
animation-name: down;
animation-duration: 3s;
}

@keyframes down {
0% {top: 0px; opacity: 0;}
30% {top: 50px;}
100% {opacity: 1;}
}

Answer 1

您需要添加 animation-fill-mode: forwards 以防止动画重置。

.logo {
  /* other properties */
  animation-fill-mode: forwards;
}