After animate effect div should not go to its initial position, it should stay at top when it comes from bottom to top using css

Question

I have apply animation effect to div tag, initially it is at bottom position so after css animation effect it will go to top but again it comes back to its bottom position so i want once it moves from bottom position to top it should stay at top not come to bottom position so how to do this in 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>

1

animation: mymove 4s forwards; – VXp Sep 21 '18 at 10:06

score 1 · Accepted Answer · answered Sep 21 '18 at 10:06

What you need is animation-fill-mode: forwards;:

div {
    width: 100px;
    height: 100px;
    background: grey;
    position: relative;
    top:234px;

    animation: mymove ;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    
}

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

<div></div>

After animate effect div should not go to its initial position, it should stay at top when it comes from bottom to top using css

1 Answers1