停止CSS3 KeyFrames动画

Question

我将div设为动画

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

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

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

现在问题是当动画结束时它会回到top=0 ...我想在动画结束时它应该保留在top=400px;

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

Answer 1

要保持动画的结束状态，您可以为div元素提供一个初始顶级属性。

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

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

当动画结束时，你的div的top属性将接管，你应该有你想要的效果。