YamasakiMasaki.com
  • ホームHome
  • ヤマサキマサキ / やまCh.YouTube
  • 外部記憶装置Blog
  • 制作支援ツールTools
  • ツイッターTwitter
  • メガネカケル-○○-×○
外部記憶装置
2021.03.18

CSSのプロパティの変化を時間を指定するtransition

:hoverなどの疑似クラスを利用してCSSのプロパティ値を変更させるとき、transitionを利用して時間経過で除々にプロパティ値を変化させることができあます。
CSS アニメーション transition
この記事をシェア

transitionのプロパティは4つ

transition-delay:1s;
transition-duration:1s;
transition-property:all;
transition-timing-function:ease;

transition-delay

transitionの変化が始まる時間を指定します。
transition-delayに指定した時間経過後にプロパティ値が変化し始めます。

 

transition-duration

変化にかかる時間を秒単位で指定します(1s、0.5sなど)。

 

transition-property

transitionの効果を適用するプロパティを指定します。
適用するプロパティ名をカンマ区切りで記述することで複数指定できます。
「all」としていすれば、transitionが適用できるプロパティすべてが対象となります。

 

transition-timing-function

transitionで変化するタイミングなどを指定します。


指定できる値は以下の通り
ease
 開始と終了が滑らかに変化
linear
 一定の間隔で変化
ease-in
 ゆっくりと変化が始まる
ease-out
 ゆっくりと変化が終わる
ease-in-out
 ゆっくり始まり、ゆっくり終わる

また、上記以外にcubic-bezier関数で変化量を指定することもできます。

この記事をシェア
CSSでの改行制御あれこれ
一覧に戻る
OpenGraph設定の雛形
ヤマサキマサキ
1985年・大阪生まれ大阪育ち。IT業界で主にWEBシステムだったりWEBサイトだったりを作って生きてます。お問い合わせなどはTwitterにてお願いします。
ヤマサキマサキ / やまch. @_Ya_Masaki_ SUZURI 「メガネカケル」
© YamasakiMasaki