css transitionプロパティ

cssでアニメーションをつけることができるtransitionプロパティ

基本的な使い方は以下の通り

h1{

  transition:all 3s ease

}

指定できるのは「transition:変化の対象 変化の時間 変化の仕方(順不同)」

変化の対象・・・「アニメーション対象となるcssプロパティ(allだと全て)」

変化の時間・・・「s(秒)またはms(ミリ秒)で指定」→変化に遅延を遅らせたい場合は変化の時間の後ろに半角スペースを空け、遅延させる秒数を指定する

変化の仕方・・・「ease(初期値)、、、開始時と終了時は緩やかに変化 / linear、、、開始から終了まで一定に変化 / ease-in、、、開始時は緩やかに変化し終了に近づくと早く変化 / ease-out、、、開始時は早く変化し終了時は緩やかに変化する」

この記事が気に入ったらサポートをしてみませんか?