缓入动画一次，然后线性

Question

以下动画缓入，4 秒后突然停止并再次缓入，依此类推。是否可以做到这一点，使其只缓解一次，然后线性继续？

-webkit-animation: move 4s ease-in 0s infinite;

Answer 1

您可以只执行一次缓入动画，然后让另一个线性动画开始（有延迟）并执行无限次;

根据动画的类型，它可以工作：

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
   -webkit-animation: move 5s ease-in, move 5s linear 5s infinite; 
    animation: move 5s ease-in, move 5s linear 5s infinite;
 
}
@-webkit-keyframes move {
    0% {left: 0px;}
    50% {left: 200px;}
   100% {left: 0px;}
}
@keyframes move {
       0% {left: 0px;}
    50% {left: 200px;}
   100% {left: 0px;}
}

<div></div>