56.transitionを使おう ～CSSで動きをつけよう～

今日はCSSで動きをつけるtransitionについて、まとめていきます。

CSSで動きをつけるってどういうこと？

早速やっていきましょう。

transitionプロパティとは

そもそも「transition」ってどんな意味なんでしょうか。

調べると「遷移」とか「移り変わり」とか出てきますね。

そう、遷移に関するプロパティです。

と言われても全然わからないので、かみ砕いて書いていきます。

transitionは、プロパティの値が適用されるときの移り変わり方について指定できるのです。

？？？

プロパティの値が移り変わる時っていつでしょうか。

プロパティの値が変化する時を「連続して」「徐々に」変化させる

疑似クラス等の要素の状態に対してプロパティを指定する場合。

おなじみの:hoverでopacity : 0.7;とかしますよね。

この移り変わりについてtransitionプロパティを指定することを考えてみましょう。

例えば、

よくあるaタグのリンクに通常はopacity:1;で、

hoverしたらopacity : 0.7を適用します。

そのままだとカーソルを乗せた時点で、opacityが0.7に変化するので、2つの値を瞬時に切り替えています。なので、見た目は一瞬で切り替わります。

ここで、仮にopacityを1から1秒ごとに、0.1ずつ減少させて、0.7にしたらどうなるのでしょうか。

そうです。アニメーションしているように見えるのです。

100m走にたとえてみましょう。

transitionなし→スタートからゴールまで瞬間移動

transitionあり→スタートからゴールまで、走るのか、歩くのか、早いか遅いかを指定できる。

イメージはこんな感じです。

こうした「スタートとゴールの間の状態」について柔軟に指定できるのが

transitionプロパティなのです。

面白くなってきましたね。

jQuery(JavaScript)でアニメーションさせるしかないと思っていたのが、

CSSでも可能だったとは。

transitionはショートハンド。指定できるプロパティは４つ。

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

上記４つをまとめて指定することができます。

１つずつ見ていきましょう。

transition-property

これは、間の状態をしていするプロパティを指定します。

marginの間の状態を指定したいならmarginを。

opacityならopacityを指定します。

ただ、「all」としてすべてのプロパティを指定して、

状態変化後のスタイルの方に変化させたいプロパティだけ書いておく。

この方が、楽に適用できますし、管理もしやすそうですよね。

transition-duration

これは、変化が開始してから終了するまでにかかる時間を指定します。

ゆっくり変化していくか、一瞬で変化するのか指定する秒数で変わります。

transition-timing-function

これは変化の速度を指定できます。

例えば、

0%～100%に1秒で変化するとします。

0%～33%は0.4秒で、

33%～66％は0.2秒で、

66%～100%は0.4秒で変化させる。

このようなイメージです。

この例だと最初と最後だけゆっくりで、真ん中だけ早く変化するのが想像できると思います。

実際は既定の速度パターンがキーワードで設定されているので、それを指定します。

ベジェ曲線の考え方で自由に指定するやり方もあるようです。

transition-delay

これは、状態の変化が開始するまでの時間を指定します。

読んで字のごとし遅延時間の設定です。

0.3秒遅延させると、

例えばhoverなら、マウスカーソルが要素に乗ってから0.3秒たったところで

プロパティの変化を開始するといった具合です。

transitionショートハンドはこれら４つの値を

transition: property duration timing-function delay;

のようにまとめて指定できます。

具体例をあげると、

transition: all 0.3s ease 0s;

のように指定します。

このtransition指定の意味は

すべてのプロパティの状態変化を、

遅延0秒で、

変化の速度はease、

開始から終了まで0.3秒で変化します。

このtransitionを使って、要素が様々な動きをしているように見せることができます。

今日のまとめ

• transitionはプロパティの値が変化する時の遷移時間を指定できる。
• よく使うのはhoverなどの疑似クラス
• transformプロパティと組み合わせると、豊かな動きをさせられる

本当はもっと掘り下げてもよかったのですが、時間の都合上、今日はここまでにします。

では、また。