transition-delay（トランジション・ディレイ）プロパティは、変化が始まるまでの待ち時間を指定します。
transition-delay（トランジション・ディレイ）プロパティ使いさまざまな開始時間の違いを確認しましょう。
|
1 2 3 4 5 |
<ul class="ulBox"> <li class="animeA">animeA</li> <li class="animeB">animeB</li> <li class="animeC">animeC</li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.ulBox { display: flex; flex-direction: column; margin-bottom: 2em; } .animeA, .animeB, .animeC { width: 100px; height: 50px; background-color: #c00; transition-property: all; transition-delay: 0s; transition-timing-function: ease; padding: 10px 0px 0px 0px; color: #fff; font-size: 1.6rem; text-align: center; } .animeA { transition-delay: 0; transition-duration: 500ms;} .animeB { transition-delay: 1s; transition-duration: 2s;} .animeC { transition-delay: 500ms; transition-duration: 100ms;} .animeA:hover { background-color: #00c; color: #000; width: 200px; } .animeB:hover { background-color: #00c; color: #000; width: 200px; } .animeC:hover { background-color: #00c; color: #000; width: 200px; } |
下の三つのバーの動きの始まる時間の違いを確認してください。
- animeA
- animeB
- animeC
変化の開始時間を変えて動きをつける。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.ulBox02 { display: flex; flex-direction: column; margin-bottom: 2em; } .animeD { width: 100px; height: 100px; background-color: #c00; transition-property: all; transition-delay: 0s; transition-timing-function: ease; text-align: center; padding: 40px 0px 0px 0px; color: #fff; font-size: 1.6rem; transition-duration: 500ms, 500ms, 500ms; border-radius: 50%; transition-delay: 0s, 1s, 2s; transition-property: background-color, color, border-radius; } .animeD:hover { background-color: #00c; border-radius: 0%; color: #000; } |
- animeD