【こんなにできるCSS3】CSS3アニメーション効果を自作してみよう

お仕事お疲れ様です。ベニヤマです。
前回CSS3アニメーションについて書きましたが、今回はCSS3アニメーションの変化について解説していきます。

必要な知識

HTMLとCSS、前回の記事の知識が必要です。 前回の記事をまだ読んでいない方は下の記事を読んでくださいね。

アニメーション変化の種類

CSS3でアニメーション変化を設定する時はtransition-timing-functionプロパティにはあらかじめ決められたアニメーションが 5種類あります。 今回はマウスを乗せる(スマホならタップ)と横に伸びるボタンサンプルを元にアニメーション変化の違いを見ていきましょう。

transition-timing-function:ease;

最初と最後にゆっくり動きます。

transition-timing-function:liner;

経過時間に関係なく一定に動きます。

transition-timing-function: ease-in;

最初だけゆっくり動きます。

transition-timing-function: ease-out;

最後だけゆっくり動きます。

transition-timing-function: ease-in-out;

最初と最後が"ease"の時より更に遅く動きます。

アニメーションを自作しよう

「アニメーションがこれだけだと正直ちょっと物足りないかも・・・」と感じたあなた、大丈夫です。CSS3でアニメーションを自作できますよ。 でもその前にアニメーション変化を表した「3次ベジェ曲線」についてちょっと勉強しましょう。

3次ベジェ曲線って何?

3次ベジェ曲線とは先ほど書きましたがアニメーション変化の割合を表したグラフです。よくCSS3アニメーションをググると必ず出てくるあのグラフですね。
3次ベジェ曲線は横軸(x軸)が時間(0秒からtransition-durationで設定した秒数まで)、縦軸(y軸)が変化の割合を表します。「変化の割合」と書くと「???」になりますが、ここではまぁ「距離」のようなものだと思ってください。
ここに上の画像のようにP0,P1,P2,P3の4ポイントを設定します。 P0とP3はそれぞれアニメーションの開始と完了を表すので固定です。P1とP2の位置が変わることでグラフの曲線が変化します。

ここまではOKですね?

3次ベジェ曲線でざっくり分かるアニメーションの動き方

3次ベジェ曲線で何が分かるかと言うとアニメーション変化の緩急が分かります。
方法は簡単。P1, P2がそれぞれ通った横線を引くだけ。これで最初、中間、最後と動きを3つに分けることができます。
で、最初、中間、最後のうち縦幅が広ければ広いほど動きが速くなります。(ただしグラフが直線の場合はP1, P2の位置に関係なく動きが一定です)上のグラフだと最初と最後の動きがゆっくりで、中間の動きが速いですね。
例1:グラフが上向きカーブ(最初の動きが速い)
例2:グラフが下向きカーブ (最後の動きが速い)

CSS3で3次ベジェ曲線を表現しよう

さて、CSS3でアニメーションを自作する場合3次ベジェ曲線を設定します。
書き方はこんな感じ。
transition-timing-function:cubic-bazier(P1のx軸, P1のy軸, P2のx軸, P2のy軸);
ポイントはcubic-bazier関数(3次ベジェ曲線関数)です。
この関数を使ってグラフのP1とP2の座標を設定します。
例:P1(0.23, 0.08)、P2(0.98,0.27)の場合
transition-timing-function:cubic-bazier(0.23, 0.08, 0.98,0.27);

簡単に自作できるツールがあります。

あーお客様!「うわー・・・無理っす」と頭を抱えてブラウザバックしないでください。大丈夫。大丈夫ですよ。ベジェ曲線を操作してアニメーションを作成できるツールがあります。

cubic-bazier.com

http://cubic-bezier.com/
赤い丸と青い丸でベジェ曲線を操作して、作成したアニメーションと既存のアニメーションで動きが比較できます。比較アニメーションのインポートやエクスポートも可能です。

Rob La Placa

http://www.roblaplaca.com/examples/bezierBuilder/
cubic-bazier.comと同様に自分で作成したアニメーションをシミュレーションできますが、こちらは既存のアニメーション全てと動きが比較できます。

まとめ

今回はCSS3アニメーションの効果に焦点を当てて紹介しました。
最近ではアニメーションを作成してくれるWebサービスがいくつか出てきましたが、そもそもアニメーション効果の設定が分からないと厳しいなぁという印象が強かったのでまとめてみました。
特に3次ベジェ曲線はちょっととっつきにくいですが、グラフの読み方さえ分かれば後はツールで簡単に自作できると思います。 是非Webサイトに取り入れてみてくださいね。
ではではー。

Sponsored link

コメント