停止 CSS3 关键帧动画

Question

我已经为 div 设置了动画

div{
   animation-name:moveit;
  animation-duration:2s;
}

@keyframes moveit{
    0%{
     top:0;
   }
   100%{
     top:400px;
   }
}

此动画将2sec 中的一个div 从top 0px 移动到top=400px。

现在的问题是动画结束时它会回到top=0...我希望动画结束时它应该保持在top=400px;

它不会重复，但会回到原来的位置，但我希望它保持在 100%

Answer 1

为了保持动画的结束状态，你可以给你的 div 元素一个初始的 top 属性。

div {
  top: 400px;
  animation-name: moveit;
  animation-duration: 2s;
}

@keyframes moveit {
  0% { top: 0px; }
  100% { top: 400px; }
}

当动画结束时，您的 div 的 top 属性将接管，您应该会获得所需的效果。