WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

はっち

2019/10/21

easeじゃ物足りない?「cubic-bezier」でアニメーション表現の幅を広げよう!

投稿者: はっち
カテゴリー: マークアップ >CSS

Webサイトの要素にアニメーションをつける際は、対象にCSSのtransitionを設定するかと思いますが、要素の動き方として「ease」や「linear」など以外にもできることをご存知ですか?
今回はその方法を書いていきたいと思います。

方法

といっても簡単です。
transition(あるいはtransition-timing-function)に「cubic-bezier()」を設定してあげるだけです。

「cubic-bezier()」とは、「ease」や「linear」などの決まった変化ではなく、独自にカスタムが可能になるものです。
「()」の中にいくつかの数字を入力することで設定が可能になります。

設定方法

手動で設定するのはかなり大変ですので、以下のサービスを使います。

cubic-bezier.com

ここでは、視覚的操作をしながら実際の動きも確認できますのでかなり便利です。Photoshopを使われたことがあるなら、「トーンカーブ」の調整の仕方と似ていますので、なおのこと分かりやすいと思います。 アニメーションの時間も設定できますので、ぜひご利用ください。

まとめ

簡単ですが「cubic-bezier()」次第でかなり変化をつけられますので、いろいろと試してみることをオススメします。
「ease」じゃなんか違うな、と感じたらぜひ使ってみてください。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ