時間差のアニメショーンを繰り返したい。

Question

###時間差のアニメションを繰り返したい。
下記の記述は理想の流れのパターン
左から一つ目が上がって下がって止まる、二つ目が上がって下がって止まる、三つ目が上がって下がって止まって終わり、となっている。

これを、三つ目まで行ったら、また左から一つ目が動いて次、という風に動かしたい。
さらに理想をいうなれば、四つ目・五つ目と増えても、同じように動くようにしたい。

###時間差アニメーション

    <ul id="line">
      <li><img src="img/img01.png" alt=""></li>
      <li><img src="img/img02.png" alt=""></li>
      <li><img src="img/img03.png" alt=""></li>
    </ul>

#line.motion li{
  position: relative;
  animation-name: up;
  animation-duration: 1s;
}
#line.motion li:nth-of-type(2){
  animation-delay: 1s;
}
#line.motion li:nth-of-type(3){
  animation-delay: 2s;
}
@keyframes up{
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}

$(document).ready(function(i){
  $("#line").addClass("motion");
});

###失敗例（）
上記の記述に
「animation-iteration-count」を追記したら
上がって下がって止まるではなく、上がって下がってを繰り返している。

#line.motion li{
  position: relative;
  animation-name: up;
  animation-duration: 1s;
 animation-iteration-count: infinite;
}
#line.motion li:nth-of-type(2){
  animation-delay: 1s;
}
#line.motion li:nth-of-type(3){
  animation-delay: 2s;
}
@keyframes up{
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}

語彙力が低くて、思っていることが伝わっているか分からないけど、助けを求める。

Answer 1

こちらはやりたいことに近いのではないかと思います。
まずはJSを使おうとせず、単純にCSSクラスの設定だけである程度作ってみたほうが良いと思います。

• Rainbow Dots Motion Loading

Comments

[退会済みユーザー]

JSでややこしするからダメなんですね。
上記を参考にやりたかったことは出来ました。ありがとうございます。

Answer 2

現状3つを遅延だけで操作しているため、
失敗例はアニメーションの輪唱みたいになっていますね。

さて、アニメーションの終了時、イベントが発行されます。
(このサイトの、「アニメーションイベントを使う」等を参照ください。)

現状はulにイベントをつけるよう作成していますが、
li単体でアニメーションが動作するよう(一つのliが上がって下がるだけのアニメーション)にし、

1. $(document).readyにてクラスを最初のliにつける
2. 終了イベントにてクラスを外すと共に、次のliにクラスをつける(最後のliの場合は最初に戻る)

とすれば問題ないと思います。

"次のli"ですが、少し頑張ればイベント内で取り出すことが出来ます。
面倒であれば今どの要素をアニメーションさせているかをグローバル変数でもっていると楽です。

Comments

[退会済みユーザー]

こちらも、試してみます。

Answer 3

animation-iteration-count 読んで字のごとく、繰り返し回数ですので数字を設定すればいいと思いますが。infiniteは無限ループの意味です。