HTML5 CSS3 Javascript

Question

I just started learning HTML5 and CSS3 and I'm trying to animate a small circle in a box. The animation worked but it is moving back to its initial position. I want the circle to the animated position.

<head>
<style type="text/css">

#green{
width:600px; height:600px; background-color:green;
}

.yellow{
width:100px; height:100px; border-radius:50%;
background-color:yellow; position:relative; top:10%; left:10%;
animation-name:move;
animation-duration:1s;  
}

@keyframes move{
from{transform:translateY(0)}
to{transform:translateY(-50px)}
}
</style>
</head>

<body>
<div id="green">
<div class="yellow"></div>
</div>
</body>

Dizza · Accepted Answer · 2018-08-01 15:05:26Z

1

Your animation is done and skips to the initial position, add this underneath the animation-duration. It tells the animation to stop at the last frame

animation-fill-mode: forwards;

answered Aug 1, 2018 at 15:05

Dizza

1021 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML5 CSS3 Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related