css transitionプロパティ
cssでアニメーションをつけることができるtransitionプロパティ
基本的な使い方は以下の通り
h1{
transition:all 3s ease
}
指定できるのは「transition:変化の対象 変化の時間 変化の仕方(順不同)」
変化の対象・・・「アニメーション対象となるcssプロパティ(allだと全て)」
変化の時間・・・「s(秒)またはms(ミリ秒)で指定」→変化に遅延を遅らせたい場合は変化の時間の後ろに半角スペースを空け、遅延させる秒数を指定する
変化の仕方・・・「ease(初期値)、、、開始時と終了時は緩やかに変化 / linear、、、開始から終了まで一定に変化 / ease-in、、、開始時は緩やかに変化し終了に近づくと早く変化 / ease-out、、、開始時は早く変化し終了時は緩やかに変化する」
この記事が気に入ったらサポートをしてみませんか?