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

投稿者： くりりん
カテゴリー： マークアップ >CSS

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

方法

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

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

設定方法

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

cubic-bezier.com

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

まとめ

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