CSSでアニメーションanimation-delayを指定してアニメーション開始時間を指定する方法
animation-delay: 5s;と指定すると、5秒後にアニメーションが開始されます。
2個目のliタグにだけanimation-delayを指定しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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の大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント