CSS「animation」で紹介したアニメーションは無限ループです。
アニメーションが終わったら、最後停止してループさせなくする方法を紹介します。
|
1 2 3 4 5 6 7 8 9 10 |
#anime { width: 50px; height: 50px; background-color: red; -webkit-animation: spin 1.5s linear forwards; -moz-animation: spin 1.5s linear forwards; -ms-animation: spin 1.5s linear forwards; -o-animation: spin 1.5s linear forwards; animation: spin 1.5s linear forwards; } |
infiniteの部分をforwardsにするだけです。
何も指定しない場合はアニメーション終了後止まらず要素が消えます。