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

This question already has answers here:

Maintaining the final state at end of a CSS3 animation
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
现在，动画使圆从左移到右角。但是动画结束后，它会再次向左滑动。
圆到达屏幕的右角后如何使它停留在右角？

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

最佳答案

添加到.circle：

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

（请参见w3schools）

关于css - 圆到达屏幕的右上 Angular 后如何使它停留？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51624176/