###css3アニメーションのタイミング
css3でアニメーションをつけることは出来た。
が、その先。
別々に記述したアニメーションの発火のタイミングをコントロールしたい。
###下記のものをさらに改良したい。
改良したい点は以下の2つ。
(1)1つのアニメーションが終わったら、別のアニメーションを動かしたい。
(2)一連のアニメーションをループさせたい。
(1)については以下の方法でも実装できた。
html
1 <div id="loop"> 2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 </ul> 7 </div>
css
1#loop.motion ul li{ 2 animation-name: up; 3 animation-duration: 3s; 4 animation-fill-mode: forwards; 5} 6#loop ul.plus li:nth-of-type(2){ 7 animation-name: down; 8 animation-duration: 3s; 9 animation-fill-mode: forwards; 10} 11@keyframes up { 12 0% { 13 opacity: 0; 14 } 15 100% { 16 opacity: 1; 17 } 18} 19@keyframes down { 20 0% { 21 margin-top: 0; 22 opacity: 1; 23 } 24 50% { 25 margin-top: -30px; 26 } 27 100% { 28 margin-top: 0; 29 opacity: 1; 30 } 31}
JavaScript
1$(document).ready(function(){ 2 $("#loop").addClass("motion"); 3 setTimeout(function(){ 4 $("#loop ul").addClass("plus"); 5 },3000); 6});
しかし、
これだと、さらにこの後にアニメーションつける場合に、
下記のように遅延発火させていく形になる。
JavaScript
1$(document).ready(function(){ 2 $("#loop").addClass("motion"); 3 setTimeout(function(){ 4 $("#loop ul").addClass("plus"); 5 },3000); 6 setTimeout(function(){ 7 $("#loop ul").addClass("plus"); 8 },5000); 9});
これ以外の方法で、タイミングコントロールしたい。
さらに、
一連のアニメーションをループさせたい。
一連のアニメーションをループないし、繰り返す方法にかんしては、またくできなかった。
HELP!
----------追記
「一連のアニメーションについて」
liタグが
フェードインで現れた後、
3つのうち1つが上下に動く。
3つが消える。
を繰り返したいです。
上記の記述だと、最後の消えるの動作がありませんね。
質問に対しての回答になっているか分かりませんが、ご参考にしていただけらばさいわいです。
回答4件
あなたの回答
tips
プレビュー