I have successfully applied an animation effect to a div tag. Initially, the div is positioned at the bottom, but with the CSS animation effect, it moves to the top. However, after reaching the top position, it reverts back to the bottom. I want it to stay at the top once it reaches that position and not return to the bottom. How can I achieve this using 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>