工藤cubic-bezierを使ってアニメーションの雰囲気を変えてみよう!マークアップfacebooktwittercssをよく使う人なら既におなじみ、transitionプロパティによるアニメーション。hoverをしたとき、スムーズに画像を拡大等してくれます。CodePen.これでもアニメーションが滑らかになって十分ではあるのですが、アニメーションをがっつり使うならcubic-bezierというイージング(動きの加減速)をさらに細かく自分で指定できる関数を使用した方がさらに動きに幅が広がります。自分でも改めて復習がてらまとめてみました。cubic-bezierをいろんな値で試してみようアニメーションのイージングの値を理解しようcubic-bezierを使用する前に、まずは元から用意されているアニメーションのイージングについてを確認しておきましょう。先ほど上の例で使用した『ease』、この部分がアニメーションのイージングに影響します。種類は以下の5つです。アニメーションの開始と終了がゆっくり変化します。linear一定の速度で変化します。ease-inアニメーションの開始はゆっくり、終了に近づくと速く変化します。ease-outアニメーションの開始は速く、終了に近づくとゆっくり変化します。ease-in-outeaseよりさらにアニメーションの開始と終了がゆっくり変化します。いう感じで文章で見てもわからないと思うので、実際に見てみましょう。CodePen.こうやって見比べてみるとわかりやすいかと思います。上記の通り、このようなアニメーションのイージングを自分で指定できるのがcubic-bezierです。cubic-bezierを使ってみようとりあえずcubic-bezierを実際に使ってみましょう。記述としては下記のような感じになります。cubic-bezier(.25,.1,.25,1);一番最初の記述のeaseの部分を置き換えただけです。cubic-bezier(.25,.1,.25,1)と書かれてもわけがわからないと思うのですが、要は3次ベジェ曲線の座標の値を記述しているような感じです。私は自分で座標を考えることができる気がしないので、ジェネレーターを使います。以下のサイトが確認しやすいのでお世話になっています。Curve例えばこんな感じのベジェ曲線を書くと、下の例のように元から用意されているイージングとはまた違った動きをすることができます。CodePen.cubic-bezierをいろんな値で試してみよう最後に、一番最初のhoverアニメーションでいろいろ試してみました。分かりやすいように極端なものもありますが...少し値を変えるだけで雰囲気が変わりますね。CodePen.とりあえずざっと概要がわかればいいなと思って書いたので、cubic-bezierを使うきっかけになればと思います。最近はWordPressを触るのが好きです。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。(エイトビット)東京都目黒区でWebサイト制作、Webシステム開発などを行っております。コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。見積りシミュレーションをご用意いたしました。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。WordPressでも利用することは可能ですが、WordPressはセッション関数を推奨していません。