2015/10/08

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。
海外の有名ブログでわかりやすいチュートリアルを選んで翻訳してみました（結構、意訳したり、説明を付け足しています）。
CSSアニメーションを見かける機会はどんどん増えています。
CSSアニメーションの魅力はなんといっても、プログラムが苦手な人でも手軽に動きのあるUIを実装できること。
今後のサイト制作ではぜひとも取り入れたいですよね。
今回のチュートリアルでは四角から円形に変化するアニメーションを作ってみます。

CSSアニメーション実装のご参考になれば幸いです。
なお、英語の翻訳間違いなどもあるかと思いますが、そのあたりは優しくご指摘ください。

@keyframesとanimation

CSSアニメーションでは、キーフレームを利用してアニメーションすることができます。
そのメインコンポーネントととなるのが@keyframesです。
@keyframesはアニメーションをつけたいプロパティのタイムラインを設定するもので、スタートから終点までの間に、複数設定できます。
たとえば、スタートと終点のキーフレームで円形から四角形に変化するように指定した場合、円形から四角形にかわる途中の変化をコントロールできません。
でも、スタートと終点の間にキーフレームを追加すると、途中の変形をコントロールできるようになります。
円形→三角形→四角形といった具合です。

@keyframes

実際に、@keyframesを見てみます。
@keyframesは

• ・名前を自由に決められます（例:tutsFade）
• ・ステージ0％〜100%の間で設定します。from（=0%）〜to（=100%）でもOK
• ・CSSスタイルを各ステージに記述します

たとえば以下のようなコードになります。
この例では、不透明度を1から0に変化させるように設定しています。

あるいは、

ショートハンドでは、

animation

animationプロパティは、CSSセレクタに@keyframesを呼び出して利用します。
animationは複数のプロパティをもっています。

たとえば、以下のようなコードになります。

ショートハンドでは、

ベンダープリフィックス

animationプロパティにはベンダープリフィックスをつけます。
ベンダープリフィックスを一度に付けたい場合は、「Express Prefixr」が便利です。
ショートハンドで作成したコードにベンダープリフィックスをつけると以下のようになります。

@keyframesの場合は、

複数のanimation

animationのプロパティはカンマ区切りで一度に複数設定することができます。
具体的には以下のような感じです。

四角形から円形に変形するアニメーションのチュートリアル

これまで見てきた@keyframes、animationプロパティを使って、実際に四角形から円形に変形するアニメーションを作成していきます。
@keyframesは、全部で5ステージにわかれます。
それぞれのステージで、border-radius、rotation、異なるbackground colorを定義していきます。
完成イメージは以下になります。

基本要素

最初にアニメーションさせるための要素をマークアップします。
まずはdivをマークアップ。

続けて、CSSでデフォルトのスタイルを適用していきます。

@keyframesを設定する

@keyframesを用意しましょう。
今回、四角形から円形に変化させる場合、5ステージに分けて行います。
@keyframesの名前は、square-to-circleとします。

以上のステージにスタイルを定義します。
border-radiusで四角形の角に、順番に丸みを持たせていきます。

加えて、各ステージに異なるbackground-colorを設定していきましょう。

さらに、視覚的に面白い動きをつけるため、回転する動きを、transform:rotateで設定します。

これで@keyframesの設定は完了です。
順番を追っていくとわかりやすいですよね。

animationの設定を加えます

@keyframesの設定が完了したので、続いてanimationの設定を行います。
animation-nameはsquare-to-circle
animation-durationは2s
animation-delayは1s
animation-iteration-countはinfinite（無限ループ）
animation-directionはalternate（最初は通常通りアニメーションしますが、2回目以降は終点から始まり、始点で終わります）
animationはショートハンドで記述します。

ここまでのデモは以下のようになります。

animation-timing-functionを設定する

これでもうアニメーションできました。
でも、まだanimation-timing-functionを利用していません。
規定値を使ってもいいのですが、ここでは、より細かいanimation-timing-functionを設定できるcubic-bezierを利用して再生速度（イージング）を設定します。
ただ、cubic-bezierを利用する場合、そのまま記述するのはたいそう骨が折れます。
そこで利用するのが便利なツールです。

CSS Easing Animation Toolでcubic-bezierを設定する

その便利なツールというのが、CSS Easing Animation Toolです。

このツールを利用すれば、簡単にcubic-bezierの値を設定できます。
グラフ上のベジェ曲線を直接触って変化させれば、微妙な再生速度（イージング）を設定できて、CSSのコードも生成されます。
もちろん、cubic-bezierだけでなく、linear（一定の速度で再生）、ease（最初と最後を滑らかに再生）、ease-in（最初をゆっくり再生）、ease-out（最後をゆっくり再生）、ease-in-out（最初と最後をゆっくり再生）もプルダウンで設定できますよ。
cubic-bezierの値を設定する場合には、グラフ部分のハンドを触って再生速度を設定します。

以上の設定からcubic-bezier部分のコードをコピーして付け加えます。

ベンダープリフィックスをつける

最後に、ベンダープリフィックスつければ完了です。

出来上がりのデモです。

ここまではA Beginner’s Introduction to CSS Animationをもとに作成しました。

Sponsored by

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。