CODEWITHSUNDEEP
css-animations
DANIEL TUBONEMI
DANIEL TUBONEMI

Reputation: 1

HTML5 CSS3 Javascript

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>

Upvotes: 0

Views: 32

Answers (1)

Dizza
Dizza

Reputation: 102

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;

Upvotes: 1

Related Questions