transitionでゆっくりきのこ

2013-12-08 2018-08-30

「js使うと重くなるし、かと言ってcssのanimationを使う程手間はかけたくないけど、それっぽく動きとかつけたい(クライアントそんなところにばかり食いつくし…)」みたいなケースは残念なことに結構ある。体感的にはかなりある。
そういったケースで便利なのがtransition。

大したことが出来るわけではないですが、「どんな変化をさせるか」「どのタイミングで変化させるか」「どのくらいの時間をかけて変化させるか」などを設定するだけで、「それっぽく見せる」ことが出来るので、面倒なクライアントの時に結構な威力を発揮します。

ということで、今日はcssのtransitionプロパティの使い方を少しご紹介。基礎的な使い方と言うよりも「こんな手法でこういうことが実現出来るよ」的な話を一つ書きたいと思います。

transitionのサンプル

きのこ
↑マウスカーソルを乗せるときのこが消えるぞ!

transitionてなんだ

transitionとは一言で言うと「時間要素のある変化」のこと。マウスカーソルを合わせると「だんだん色が変わっていく」とか「少し待ってから横にずれていく」とかアニメーションぽい動きをCSSで表現するための要素。何か凄そうな感じがしなくもないけど、css自体は結構シンプル。

ゆっくり表示を実装

transition自体はシンプルなので、いきなり応用編。

なにか隠れてるぞ!マウスカーソルを乗せて発見しよう!

css

ポイントはtransitionではなく、opacity(透明度)の使い方。初期状態ではopacityに0(完全に透明)を指定し、:hoverにopacity1(完全に不透明)を指定している。transition自体は「変化のパターン」「変化にかける時間」「変化が始まるまでの時間」を制御するだけなので、実際に「どんな変化をさせるか」は実装次第。opacityなりbackground-colorなり好きな要素を指定すれば良い。

あとがき

一つ注意点、transitionは:hoverのような動作に反応するタイプの要素できっかけを作ってやらないと動かない。更に複雑な事がやりたい場合は、animationの使用を検討しよう。
ただ、animationの実装はかなりめんどくさいので、SCSSなどのCSS拡張メタ言語の利用を推奨。個人的にはanimation自体まだまだ非推奨としたい。気軽に「CSSでアニメーションとか出来るよね?」とか言うやつがいたらtransition見せとけば大体黙ります。