圆到达屏幕的右上角后如何使它停留？

Question

现在，动画使圆从左移到右角。但是动画结束后，它会再次向左滑动。 圆到达屏幕的右角后如何使它停留在右角？

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);
   }
 }

Answer 1

添加到.circle：

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

（请参见w3schools）