css - 停止 CSS3 关键帧动画

Question

我已经为一个div设置了动画

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

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

此动画在 2 秒 内将一个 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 属性将接管，您应该会得到您想要的效果。