[英]Use css to move div to a new location then stop there
Is there a pure CSS way to move a div from one place to another and stop. 是否有一种纯CSS方法将div从一个位置移动到另一个位置并停止。 What I have jumps back to original place.
我所拥有的跳回到原来的地方。
#animate {
position: absolute;
top: 0px;
left: 0px;
animation: move 3s ease;
}
@keyframes move {
from { transform: translateX(0px); }
to { transform: translateX(500px); }
}
If I need JS for this, is there are way to condition on the end of the animation instead of moving it with timeout?? 如果我为此需要JS,是否有办法在动画的结尾处进行条件处理,而不是随超时移动它?
Try adding: 尝试添加:
#animate {
// other styles...
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
You can see this working here . 您可以在这里看到此工作。
Credit to this answer . 相信这个答案 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.