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の大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
