時間的変化を与えるスタイルシートtransitionについて勉強してみた #CSS

時間的変化を与えるスタイルシートtransitionについて勉強してみた #CSS

CSS3には、時間的変化を操るtransitionがあります。
時間的変化トランジションと漢字の上にカタカナでルビをふると、不思議と何かの技っぽい。

そんな感想はさておいて。
このtransition、存在は知っていたけど、ぶっちゃけ何をどうするものなのか、よくわからないでいました。

transitionプロパティは、transition効果(時間的変化)をまとめて指定する際に使用します。
transitionプロパティでは、 transition-property、 transition-duration、 transition-timing-function、 transition-delayの各プロパティの値を、まとめて指定することができます。
このプロパティでは、値を指定する順序が重要となります。 時間として指定される最初の値はtransition-durationに割り当てられ、 時間として指定される二番目の値はtransition-delayに割り当てられます。
複数の種類のCSSプロパティに対してtransition効果を適用する場合には、値のセットをカンマ( , )で区切って指定します。

CSS3リファレンス:transition

CSSリファレンスさんの解説を見てもわかったようなわからないような、正直そんな感じです。

今のブログテーマになってからいろんなところの変化にtaransitionを使ってますが、しっかりとわからずに使っているフシもあるんですよ。
だから、ちゃんと勉強しておこうというのが今回の趣旨です。

transitionをまとめて設定するときの初期値の確認

transitionをまとめて設定するときの初期値を確認しておきます。

初期値
transition-propertyはnone、 transition-durationは0、 transition-timing-functionはease、 transition-delayは0

CSS3リファレンス:transition

transitionは、transition-property(時間的変化を与えるもの) transition-dureition(変化にかかる時間の設定) transition-timing-function(変化のタイミング・進行割合) transition-delay(変化が始まる時間)の順にまとめて指定できます。各プロパティは半角スペースで区切ります

ちなみに最初、この半角スペースで区切るというのにはまりました。ついついカンマで区切ってしまって、うまく動作しないなぁと悩んで悩んでカンマじゃダメなことに気づいたのはしばらくたってからだったり。

それじゃあ、ちょいと試してみようか

これをマウスオーバーすると、うねーっと伸びていきます。

変化にかかる時間の部分を3秒に変更するとどうなるでしょうか。

上のものより、ゆっくりと伸びていきます。

変化のタイミングの部分は、ease(開始と完了をなめらかに)、linear(一定の変化)、ease-in(ゆっくり始まる)、ease-out(ゆっくり終わる)、ease-in-out(ゆっくり始まってゆっくり終わる)、cube-bezier(数値, 数値, 数値, 数値)(自由設定みたいな)の中から好きなものを選ぶことができます。

今度は、ease-inでも設定してみます。時間変化は3秒のままで。

変化が始まるときが、さっきよりもゆっくりになりました。

せっかくなので、今回のサンプル3つを並べてみます。

順々にマウスオーバーしてみると、ちょっと楽しい(笑)

こんな感じでtransitionは時間的変化を与えることで、何かが変わる時間の変化にアニメーション的な要素を付け加えることができます。

ロケットパンチとかできそうだなーとふと思ったり。


Back to Top