CSS3入門 12 簡単なアニメーションをつけてみよう

今日はtransitionについて学んだ。

#12 簡単なアニメーションをつけてみよう | CSS3入門 - プログラミングならドットインストール

divにtransitionをつけて、マウスオン(hover)で形が変わるようにした。

transition-propertyは変化させる対象を決める。width height allと指定できる。

transition-durationはアニメーションにかかる時間を決めれる。今回は1秒と指定した。

transition-timing-functionはアニメーションの動作を指定できる。指定できるのは以下4つ。
easeは開始と終わりを滑らかにしてくれる。
linearは一定の速度で動いてくれる。
ease-inは開始がゆっくりになり、ease-outは終わりがゆっくりになる。
ease-in-outは開始と終わりがゆっくりにしてくれる。

transition-delayはマウスを乗せて何秒後に開始するかを指定できる。今回は2秒後にした。

よくオシャレなサイトで見かけるプルダウンメニュー(ドロップダウンと言うらしい)はこれなのかなと思ったら、やはりそうだった。

参考

【シンプルなソース】CSSだけでアニメーション・ドロップダウンメニュー

番外編として、余裕があれば勝手に作ろうと思う。
こういう目に見えて動くのはやっていて楽しいので好きです。

他にも応用出来るんじゃないかと思って、探していたら分かりやすいのがあった。

参考

css3 box-shadow transitionのサンプル31個作りました。 | CreativeLife

今回勉強したことだけじゃないけれど、こんなことが出来るのかと驚きました。
こんな派手な感じでなくても、ちょっと動きがあるサイトの方が見ていて楽しいよなと思いました。
こういうのはパフォーマンス的にどうなのかは分からないけれど、取り入れていけたら楽しいだろうな。