轻松动画一次然后是线性的

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>