CSSでアニメーションanimation-delayを指定してアニメーション開始時間を指定する方法
animation-delay: 5s;
と指定すると、5秒後にアニメーションが開始されます。
2個目のliタグにだけanimation-delayを指定しています。
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8" /> | |
<link rel="stylesheet" type="text/css" href="sample28.css"> | |
<title>サンプル</title> | |
</head> | |
<body> | |
<ul> | |
<li></li> | |
<li></li> | |
<li></li> | |
</ul> | |
</body> | |
</html> |
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; | |
} | |
li:nth-child(2){ | |
left: 50%; | |
width: 80px; | |
height: 80px; | |
background:black; | |
animation-delay: 6s; | |
} | |
li:nth-child(3){ | |
left: 70%; | |
width: 80px; | |
height: 80px; | |
background:gray; | |
animation-duration: 6s; | |
} |
奥山君がgist使うから私もgithubイヤイヤ期を乗り越えるべくgistデビューしてみました。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^