Question

我刚刚学习了CSS3动画，并且我使这个效果渐渐消失，但是一旦动画结束它返回原来的位置，我怎么能让它停留在那里？

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

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

Answer 2

要停止completion of animation处的元素，那么您必须包含animation-fill-mode，如下所示

因此，使用animation-fill-mode:forwards时，只要执行last frame，就会停止元素的位置。还有其他属性，例如forwards, backwards, both等等。

但是在您的animation中，您没有声明animation的结尾，即在100%停止的位置，因此它会返回0px，

检查以下两个例子，

示例 - 1

.logo {
width: 100px;
height: 100px;
position: relative;
animation-name: down;
animation-duration: 3s;
animation-fill-mode:forwards;
background:#ccc;
top:0px;
}

@keyframes down {
  0%{
    opacity:0;
  }
  30%{
    top:30px;
  }
  100%{
    top:30px;
    opacity:1;
  }
}

<div class="logo">

</div>

示例 - 2

.logo {
width: 100px;
height: 100px;
position: relative;
animation-name: down;
animation-duration: 3s;
animation-fill-mode:forwards;
background:#ccc;
top:0px;
}

@keyframes down {
  from{
    opacity:0;
  }
  to{
    top:30px;
    opacity:1;
  }
}

<div class="logo">

</div>

CSS3动画重置

2 个答案: