如何为所有迭代指定相同的延迟？

Question

＆＃13;

＆＃13;

.move
{
     background-image: url("http://placehold.it/100x100");
     width: 100%;
     height: 300px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     animation: move 1s ease 3s infinite;
}

@keyframes move
{
    from{background-position: 0, 0}
    to{background-position:200px,0}
}

＆＃13;

<div class="move"> </div>

＆＃13;

＆＃13;

＆＃13;

第一次看到3秒延迟。我希望所有迭代都有相同的延迟。有没有办法实现这个目标？

修改    如果css3动画无法实现，请告诉我一个替代解决方案

Answer 1

设置关键帧内的延迟，为2个时间值指定相同的属性

＆＃13;

＆＃13;

.move
{
     background-image: url("http://placehold.it/100x100");
     width: 100%;
     height: 300px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     animation: move 4s ease infinite;
}

@keyframes move
{
    from {background-position: 0, 0}
    75% {background-position: 0, 0}
    to{background-position:200px,0}
}

＆＃13;

<div class="move"> </div>

＆＃13;

＆＃13;

＆＃13;