停止CSS3关键帧动画(Stopping CSS3 KeyFrames Animation)

我有动画一个div作为

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

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

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

现在的问题是，当动画结束时它可以追溯到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将接管你应该有你想要的效果。

文章来源: Stopping CSS3 KeyFrames Animation