タイトルだとわかりにくいと思いますので、まずコードを載せます。
解決したいこと:現在のままで繰り返しをかけると、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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/13 01:52