複数のcssアニメーションの繰り返し動作をしたいのですが、2秒ずつ徐々にフェードしてますので、おかしくなりました。

タイトルだとわかりにくいと思いますので、まずコードを載せます。
解決したいこと：現在のままで繰り返しをかけると、2秒経ってすぐ最初の画像がまた出てきてしまいます。どうすればこの10個の画像が全部出てきてからまた最初から繰り返すことができるのでしょうか？

ご回答宜しくお願いいたします。

html
1<ul class="haikei">
2  <li class="item"><img src="common/images/001.jpg"></li>
3  <li class="item"><img src="common/images/002.jpg"></li>
4  <li class="item"><img src="common/images/003.jpg"></li>
5  <li class="item"><img src="common/images/004.jpg"></li>
6  <li class="item"><img src="common/images/005.jpg"></li>
7  <li class="item"><img src="common/images/006.jpg"></li>
8  <li class="item"><img src="common/images/007.jpg"></li>
9  <li class="item"><img src="common/images/008.jpg"></li>
10  <li class="item"><img src="common/images/009.jpg"></li>
11  <li class="item"><img src="common/images/010.jpg"></li>
12
13</ul>

css
1.item{
2  float: left;
3  margin-right: 10px;
4  padding: 5px;
5  width:auto;
6  height: 200px;
7  color: #fff;
8  list-style: none;
9  text-align: center;
10  line-height: 60px;
11  opacity: 0;    
12}
13
14.item img{
15  width:auto;
16  height:200px;
17}
18
19.haikei{
20  width:847px;
21  height:274px;
22  background-image:url('common/images/top_847_274.jpg');
23  position: relative;
24}
25
26.item:nth-child(1) {
27  -webkit-animation: example 1.5s ease 1s 1 forwards;
28  animation: example 1.5s ease 1s 1 forwards;
29  position: absolute;
30  left:20px;
31  top: 0;
32  -moz-transform: rotate(-20deg);
33  -webkit-transform: rotate(-20deg);
34  -o-transform: rotate(-20deg);
35  -ms-transform: rotate(-20deg);
36  transform: rotate(-20deg);
37}
38
39.item:nth-child(2) {
40  -webkit-animation: example 1.5s ease 2s 1 forwards;
41  animation: example 1.5s ease 2s 1 forwards;
42  position: absolute;
43  right:50px;
44  top:0;
45  -moz-transform: rotate(20deg);
46  -webkit-transform: rotate(20deg);
47  -o-transform: rotate(20deg);
48  -ms-transform: rotate(20deg);
49  transform: rotate(20deg);
50}
51
52
53.item:nth-child(3) {
54  -webkit-animation: example 1.5s ease 3.5s 1 forwards;
55  animation: example 1.5s ease 3.5s 1 forwards;
56  position: absolute;
57  left:70px;
58  top:10px;
59  -moz-transform: rotate(30deg);
60  -webkit-transform: rotate(30deg);
61  -o-transform: rotate(30deg);
62  -ms-transform: rotate(30deg);
63  transform: rotate(30deg);
64}
65
66.item:nth-child(4) {
67  -webkit-animation: example 1.5s ease 5s 1 forwards;
68  animation: example 1.5s ease 5s 1 forwards; 
69  position: absolute;
70  right:260px;
71  top:20px;
72}
73
74.item:nth-child(5) {
75  -webkit-animation: example 1.5s ease 6.5s 1 forwards;
76  animation: example 1.5s ease 6.5s 1 forwards; 
77  position: absolute;
78  left:400px;
79  top:40px;
80  -moz-transform: rotate(-20deg);
81  -webkit-transform: rotate(-20deg);
82  -o-transform: rotate(-20deg);
83  -ms-transform: rotate(-20deg);
84  transform: rotate(-20deg);
85}
86
87.item:nth-child(6) {
88  -webkit-animation: example 1.5s ease 8s 1 forwards;
89  animation: example 1.5s ease 8s 1 forwards;
90  position: absolute;
91  right:20px;
92  top:10px;
93  -moz-transform: rotate(-10deg);
94  -webkit-transform: rotate(-10deg);
95  -o-transform: rotate(-10deg);
96  -ms-transform: rotate(-10deg);
97  transform: rotate(-10deg);
98
99}
100
101.item:nth-child(7) {
102  -webkit-animation: example 1.5s ease 9.5s 1 forwards;
103  animation: example 1.5s ease 9.5s 1 forwards;
104  position: absolute;
105  left:200px;
106  top:30px;
107  -moz-transform: rotate(10deg);
108  -webkit-transform: rotate(10deg);
109  -o-transform: rotate(10deg);
110  -ms-transform: rotate(10deg);
111  transform: rotate(10deg);
112
113}
114
115.item:nth-child(8) {
116  -webkit-animation: example 1.5s ease 11s 1 forwards;
117  animation: example 1.5s ease 11s 1 forwards;
118  position: absolute;
119  left:220px;
120  top:0px;
121  -moz-transform: rotate(20deg);
122  -webkit-transform: rotate(20deg);
123  -o-transform: rotate(20deg);
124  -ms-transform: rotate(20deg);
125  transform: rotate(20deg);
126}
127
128.item:nth-child(9) {
129  -webkit-animation: example 1.5s ease 12.5s 1 forwards;
130  animation: example 1.5s ease 12.5s 1 forwards;
131  position: absolute;
132  left:60px;
133  top:5px;
134  -moz-transform: rotate(-10deg);
135  -webkit-transform: rotate(-10deg);
136  -o-transform: rotate(-10deg);
137  -ms-transform: rotate(-10deg);
138  transform: rotate(-10deg);
139
140}
141
142.item:nth-child(10) {
143  -webkit-animation: example 1.5s ease 14s 1 forwards;
144  animation: example 1.5s ease 14s 1 forwards;
145  position: absolute;
146  right:150px;
147  top:30px;
148}
149
150@-webkit-keyframes example {
151  100% {
152    opacity: 1;
153  }
154}
155@keyframes example {
156  100% {
157    opacity: 1;
158  }
159}

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

回答1件

ベストアンサー

全体のanimation-duration値を一致させ, @keyframesのほうでアニメーションの開始・終了を制御すると良いでしょう.

HTML
1<ul>
2<li>(1)</li>
3<li>(2)</li>
4<li>(3)</li>
5</ul>

CSS
1/*アニメーションの基本設定を共通化してしまう*/
2li{
3	animation-iteration-count: infinite;
4	animation-duration: 10s;
5	animation-delay: 1.5s;
6	animation-fill-mode: both;
7}
8/*ノード毎に参照するキーフレーム設定を変える*/
9li:nth-of-type(1){
10	animation-name: li1;
11}
12li:nth-of-type(2){
13	animation-name: li2;
14}
15li:nth-of-type(3){
16	animation-name: li3;
17}
18/*ノード毎のキーフレーム設定*/
19@keyframes li1{
20	from{opacity: 0}
21	10%{opacity: 0;}
22	40%{opacity: 1; animation-timing-function: ease}
23}
24@keyframes li2{
25	from{opacity: 0}
26	40%{opacity: 0}
27	70%{opacity: 1; animation-timing-function: ease}
28}
29@keyframes li3{
30	from{opacity: 0}
31	70%{opacity: 0}
32	100%{opacity: 1; animation-timing-function: ease}
33}