CSSでanimation-durationを指定してアニメーション時間を指定する方法
「CSSで@keyframesでアニメーションしてみる」で、liタグをアニメーションしてみましたが、複数のliタグに対して異なる時間を指定して、アニメーションに違いを作ってみます。
htmlは3つのliタグを持つだけです。
<!DOCTYPE html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="sample27.css"> <title>サンプル</title> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
それぞれのliタグにanimation-durationを指定します。
animation-duration: 3s;
これは3秒のアニメーションになります。
body {
background: #00CCFF;
}
@-webkit-keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(700px);}
}
@keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(700px);}
}
li{
position: absolute;
list-style: none;
-webkit-animation: square 10s infinite;
animation: square 10s infinite;
}
li:nth-child(1){
left: 30%;
width: 80px;
height: 80px;
background:black;
animation-duration: 3s; // 3秒
}
li:nth-child(2){ // 未指定なので10秒
left: 50%;
width: 80px;
height: 80px;
background:black;
}
li:nth-child(3){
left: 70%;
width: 80px;
height: 80px;
background:gray;
animation-duration: 6s; // 6秒
}
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント