複数アニメーションをループさせたい

###複数のアニメーションをつなげる
下記の記述で行っているのは
1.id="line"のliをフェードインさせながら左に詰め終わったら
2.id="only"を右へ移動させたのち
3.元の位置に戻す。

というのを、classを追加・削除のタイミングをコントロールして、
複数のアニメショーンを1つにして、１連のアニメーションにしている。

これを同じ順番で、何度もループさせたい。

###１連のアニメーション

HTML
1<ul id="line">
2  <li>1</li>
3  <li>2</li>
4  <li>3</li>
5</ul>
6<div id="only"></div>

css
1#line.motion li{
2  animation-name: left;
3  animation-duration: 3s;
4  animation-fill-mode: forwards;
5}
6#only.motion{
7  animation-name: right;
8  animation-duration: 1s;
9  animation-fill-mode: forwards;
10}
11@keyframes left {
12  0% {
13    opacity: 0;
14    margin-left: 20px;
15   }
16  100% {
17    opacity: 1;
18    margin-left: 0;
19  }
20}
21@keyframes right {
22  0% {
23    margin-left: 0;
24  }
25  100% {
26    margin-left: 60px;
27  }
28}

javascript
1$(document).ready(function(){
2  $("#line").addClass("motion").on('webkitAnimationEnd', function(){
3    $("#only").addClass("motion").on('webkitAnimationEnd', function(){
4      $("#line").removeClass("motion");
5      $("#only").removeClass("motion");
6    });
7  }); 
8});

###ループさせるさい
ループさせるさい、動きの順番が変わっていなければ、記述方法にこだわりはないです。

###追記修正
ただ、繋げるアニメーションを追加した際、既に記述してあるアニメーションの形をくずさない方法。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<div class="motion">
2	<ul id="line">
3		<li>1</li>
4		<li>2</li>
5		<li>3</li>
6	</ul>
7	<div id="only">only</div>
8</div>

CSS
1.motion #line li{
2  animation-name: left;
3  animation-duration: 9s;
4  animation-fill-mode: forwards;
5  animation-iteration-count: infinite;
6}
7.motion #only{
8  animation-name: right;
9  animation-duration: 9s;
10  animation-fill-mode: forwards;
11  animation-iteration-count: infinite;
12}
13@keyframes left {
14  0% {
15    opacity: 0;
16    margin-left: 20px;
17  }
18  30% {
19    opacity: 1;
20    margin-left: 0;
21  }
22  70% {
23    opacity: 1;
24    margin-left: 0;
25  }
26  100% {
27    opacity: 0;
28    margin-left: 20px;
29  }
30}
31@keyframes right {
32  0% {
33    margin-left: 0;
34  }
35  30% {
36    margin-left: 0;
37  }
38  40% {
39    margin-left: 60px;
40  }
41  60% {
42    margin-left: 60px;
43  }
44  70% {
45    margin-left: 0;
46  }
47  100% {
48    margin-left: 0;
49  }
50}
51```**動くサンプル：**[https://jsfiddle.net/nxh6sr7g/](https://jsfiddle.net/nxh6sr7g/)
52
53---
54
55**追記：**
56
57細かくアニメーションを制御するのであれば下記のようなライブラリを使うのも有効です。
58
59【Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 | un-Tech】
60[http://un-tech.jp/tweenmax-started/](http://un-tech.jp/tweenmax-started/)
61
62【velocity.jsの使い方 記述方法とオプション機能 | un-Tech】
63[http://un-tech.jp/velocity-basic-option/](http://un-tech.jp/velocity-basic-option/)
64
65【Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方 ｜ Tips Note by TAM】
66[http://www.tam-tam.co.jp/tipsnote/javascript/post6746.html](http://www.tam-tam.co.jp/tipsnote/javascript/post6746.html)
67
68【アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ - Qiita】
69[http://qiita.com/kyota/items/c46f44340a384e059a5e](http://qiita.com/kyota/items/c46f44340a384e059a5e)
70
71【軽量・簡単なのにいきいきしたアニメーションが付けられる！anime.jsを触ってみた | それいけ！フロントエンド】
72[https://liginc.co.jp/302886](https://liginc.co.jp/302886)