質問: ### css3アニメーションのタイミング css3でアニメーションをつけることは出来た。 が、その先。 別々に記述したアニメーションの発火のタイミングをコントロールしたい。 ### 下記のものをさらに改良したい。 改良したい点は以下の2つ。 (1)1つのアニメーションが終わったら、別のアニメーションを動かしたい。 (2)一連のアニメーションをループさせたい。 (1)については以下の方法でも実装できた。 ``` 1 2 3 ``` ``` #loop.motion ul li{ animation-name: up; animation-duration: 3s; animation-fill-mode: forwards; } #loop ul.plus li:nth-of-type(2){ animation-name: down; animation-duration: 3s; animation-fill-mode: forwards; } @keyframes up { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes down { 0% { margin-top: 0; opacity: 1; } 50% { margin-top: -30px; } 100% { margin-top: 0; opacity: 1; } } ``` ``` $(document).ready(function(){ $("#loop").addClass("motion"); setTimeout(function(){ $("#loop ul").addClass("plus"); },3000); }); ``` しかし、 これだと、さらにこの後にアニメーションつける場合に、 下記のように遅延発火させていく形になる。 ``` $(document).ready(function(){ $("#loop").addClass("motion"); setTimeout(function(){ $("#loop ul").addClass("plus"); },3000); setTimeout(function(){ $("#loop ul").addClass("plus"); },5000); }); ``` これ以外の方法で、タイミングコントロールしたい。 さらに、 一連のアニメーションをループさせたい。 一連のアニメーションをループないし、繰り返す方法にかんしては、またくできなかった。 HELP! ----------追記 「一連のアニメーションについて」 liタグが フェードインで現れた後、 3つのうち1つが上下に動く。 3つが消える。 を繰り返したいです。 上記の記述だと、最後の消えるの動作がありませんね。 質問に対しての回答になっているか分かりませんが、ご参考にしていただけらばさいわいです。
回答: (1)1つのアニメーションが終わったら、別のアニメーションを動かしたい。 (2)一連のアニメーションをループさせたい。 のうち(1)が解決 参考ページ http://qiita.com/chocodoughnut/items/6d4ae296b7c1494a858d ``` $("#loop").addClass("motion").on('webkitAnimationEnd', function(){ $("#loop ul").addClass("plus") }); ``` ただ、またべつの問題が発生したので 別途質問します。