Javascript 在动画效果div不应该回到它的初始位置之后，当它使用css从下到上时，它应该保持在顶部_Javascript_Html_Css

Javascript 在动画效果div不应该回到它的初始位置之后，当它使用css从下到上时，它应该保持在顶部

javascript html css

Javascript 在动画效果div不应该回到它的初始位置之后，当它使用css从下到上时，它应该保持在顶部,javascript,html,css,Javascript,Html,Css,我已经将动画效果应用于div标记，最初它位于底部位置，所以在css动画效果之后，它将转到顶部，但再次回到底部位置，所以我希望一旦它从底部位置移动到顶部，它应该保持在顶部，而不是底部位置，所以如何在css中执行此操作 <html> <head> <style> div { width: 100px; height: 100px; background: grey; position: relative; top:234p

我已经将动画效果应用于div标记，最初它位于底部位置，所以在css动画效果之后，它将转到顶部，但再次回到底部位置，所以我希望一旦它从底部位置移动到顶部，它应该保持在顶部，而不是底部位置，所以如何在css中执行此操作

<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: grey;
    position: relative;
    top:234px;

    animation: mymove ;
    animation-duration: 4s;
}

@keyframes mymove {
    from {bottom: 0px;}
    to {top: 20px;}
}

</style>
</head>
<body>



<div></div>



</body>
</html>


div{
宽度：100px；
高度：100px；
背景：灰色；
位置：相对位置；
顶部：234px；
动画：mymove；
动画持续时间：4s；
}
@关键帧mymove{
从{底部：0px；}
到{top:20px；}
}

您需要的是

动画填充模式：向前：

div{
宽度：100px；
高度：100px；
背景：灰色；
位置：相对位置；
顶部：234px；
动画：mymove；
动画持续时间：4s；
动画填充模式：正向；
}
@关键帧mymove{
从{底部：0px；}
到{top:20px；}
}
动画：mymove 4s Forward；