no-image

動的な変化

transition-property/スムーズに変化

ブロックをスムーズに変化する。

結果

SAMPLE TEXT 1

解説

「transition-property」で、変化したいプロパティを指定します。
「transition-duration」で、変化する時間を指定します。

transition-timing-function/速度の変化

速度の変化方法。

結果

SAMPLE TEXT 1

解説

「transition-timing-function」は、速度の変化のパターンを指定できます。
「liner」は、一定の速度。
「ease」は、やや減速で始まり、終わる。
「ease-in」は、減速から始まる。
「ease-out」は、減速して終わる。
「ease-in-out」は、減速で始まり、終わる。

transition-delay/変化開始

変化開始までの時間。

結果

5秒待つと変化します。

解説

「transition-delay」は、変化を行うまでの期間を指定します。単位は、「s(秒)」と「ms(ミリ秒)」が指定可能です。

transition/変化の一括指定

transitionの一括指定。

結果

SAMPLE TEXT

解説

「transition」は、「transition-property」、「transition-duration」、「transition-timing-function」、「transition-delay」を一括指定できます。