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

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

你可以使用多个动画：

＆＃13;

.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;}
}

＆＃13;

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

＆＃13;

我添加了bg-color的更改，因此最好注意第一个动画运行一次，而第二个动画（＆＃34; blub＆＃34;）运行无限。为了稍后开始的第二个动画我添加了2s的延迟

不同于＆＃39;来自＆＃39;第一次动画迭代后的位置

1 个答案: