css - 第一次动画迭代后位置不同 'from'

Question

https://jsfiddle.net/hk9qsayn/

<div class="wrapper">
    <div class="animate"></div>
</div>

.wrapper {
  width: 600px;
  height:50px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.animate  {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  animation: wind 2s linear infinite;
}

@keyframes wind {
  0% {right:30%}
  100% {right:120%}
}

我想从 right:30% 开始第一次迭代，但第二次和所有其他迭代应该从 right:-100px 开始。我尝试过使用动画但没有成功。

Answer 1

[编辑:忘记了第二个起始位置的-]

您可以使用多个动画:

.wrapper {
  width: 600px;
  height:50px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.animate  {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  //right:-100px;
  animation: wind 2s linear, 2s blub 2s linear infinite; 
}


@keyframes wind {
  0% {right:30%}
  100% {right: 120%;
        background: yellow;
  }
}

@keyframes blub{
  0%{right: -100px;}
  100%{
    right: 120%;
    background:blue;}
}

<div class="wrapper">
<div class="animate"></div>
</div>

我添加了背景颜色的更改，因此最好注意第一个动画运行一次，而第二个动画(“blub”)无限运行。 为了让第二个动画晚一点开始，我添加了 2 秒的延迟