animation-duration（アニメーション・デュレーション） プロパティは、アニメーションが始まって終わるまでの時間を指定します。
animation-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> |
下の三つのバーの動きの違いを確認してください。
- animeA
- animeB
- animeC
「animeA」はアニメーションの時間に3秒（3s）かけています。「animeB」は変化の時間に6秒（6s）ですが3秒（50%）で終わり始めの設定に帰ります。「animeC」は変化の時間に5秒（5s）かけています。