停止CSS3动画关键帧 [英] Stopping CSS3 KeyFrames Animation

问题描述

我有动画的div为

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

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

此动画从顶部0像素移动的div 到顶= 400像素在 2秒。

现在的问题是，当动画结束它可以追溯到顶= 0 ......我想，当动画结束时仍应保留在顶= 400像素;

Now the problem is when animation ends it goes back to top=0... I want that when animation ends it should remain on top=400px;

这亘古不变的重复，但还是回到原来​​的位置，但我希望它留在100％

It doesnot repeat but comes back to its original position but i want it to stay at 100%

推荐答案

要坚持，你可以给你的div元素的初始顶级物业动画的最终状态。

To persist the end state of the animation you can give your div element an initial top property.

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

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

在动画结束你的DIV的顶级物业将接管你应该有你想要的效果。

When the animation concludes the top property for your div will take over and you should have your desired effect.

这篇关于停止CSS3动画关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！