HTML,CSS,Javascript,PHPを中心に、WEB制作時に忘れがちなTipsを紹介など。
transition-delay:1s;
transition-duration:1s;
transition-property:all;
transition-timing-function:ease;
transitionの変化が始まる時間を指定します。
transition-delayに指定した時間経過後にプロパティ値が変化し始めます。
変化にかかる時間を秒単位で指定します(1s、0.5sなど)。
transitionの効果を適用するプロパティを指定します。
適用するプロパティ名をカンマ区切りで記述することで複数指定できます。
「all」としていすれば、transitionが適用できるプロパティすべてが対象となります。
transitionで変化するタイミングなどを指定します。
指定できる値は以下の通り
ease
開始と終了が滑らかに変化
linear
一定の間隔で変化
ease-in
ゆっくりと変化が始まる
ease-out
ゆっくりと変化が終わる
ease-in-out
ゆっくり始まり、ゆっくり終わる
また、上記以外にcubic-bezier関数で変化量を指定することもできます。