如何在CSS动画结束后保持元素的当前状态？

你的代码中动画结束后元素会回到视口外，是因为CSS动画默认的animation-fill-mode属性值为none，动画执行完毕后元素会恢复到初始样式。要让元素停留在动画的最终状态，只需要给.abc类添加animation-fill-mode: forwards即可。

修改后的完整代码如下：

CSS 代码 #

.abc{
  position:fixed;
  top:-100%;
  width:25px;
  height:54px;
  background:orange;
  animation-name:animaa;
  animation-delay:2s;
  animation-duration:2s;
  animation-fill-mode: forwards; /* 添加这一行 */
}

@keyframes animaa{
  0% {top:-100%;}
  100% {top:54px;}
}

HTML 代码 #

<div class='abc'></div>

说明 #

animation-fill-mode: forwards 的作用是让元素在动画结束后，保持 @keyframes 中最后一帧（100% 阶段）的样式，这样元素就会停留在 top:54px 的位置，保持可见状态。

内容的提问来源于stack exchange，提问作者provance