0

Right now, the animation makes the circle move from left to right corner. But once the animation finishes, It flicks back again to the left. How to make the circle stay on the right corner after it has reached the very right corner of the screen?

html:

    <div class="circle"> </div>

css:

.circle{
    height: 100px;
    width: 100px;
    background-color: green;
    border-radius: 100px;
    -webkit-animation-name: move; 
    -webkit-animation-duration: 20s; 
    animation-name: move;
    animation-duration: 20s;
 }

 @-webkit-keyframes move {
   0% {
     background-color:red;
     transform: translateX(0vw);
   }
   100% {
     background-color:pink;
     transform: translateX(90vw);
   }
 }
Deke
  • 4,451
  • 4
  • 44
  • 65

1 Answers1

2

Add to .circle:

.circle {
    ....
    animation-fill-mode: forwards;
    ....
}

(See w3schools)

dunnmifflsys
  • 613
  • 2
  • 9
  • 21