transition-duration（トランジション・デュレーション） プロパティは、変化が始まって終わるまでの時間を指定します。
transition-duration（トランジション・デュレーション） プロパティ使いさまざまな時間の動きの違いを確認しましょう。
|
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 41 |
.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; display: table-cell; text-align: center; vertical-align: middle; color: #fff; font-size: 1.6rem; } .animeA { transition-duration: 500ms;} .animeB { transition-duration: 2s;} .animeC { 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
「animeA」は変化の時間に.5秒（500ms）かけています。「animeB」は変化の時間に2秒（2s）かけています。「animeC」は変化の時間に.1秒（100ms）かけています。