css - 圆圈到达屏幕的最右角后如何使圆圈保持不变？

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

标签： css

Answer 1

添加到 .circle：

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

（见w3schools）