CSSアニメーションtransitionとanimationのまとめ

JavaScriptやCSSでのアニメーションは、要素に変化を付けて、ユーザーに飽きさせない効果があります。
今では有志の方々がjQueryプラグインを数多く開発し、無償で提供してくれているため、JavaScriptを深く理解していなくても読み込みと少しの記述で動きのみならず、たくさんのギミックを実装できるようになりました。ですが、ウェブサイトのコーディングを始めたばかりで、HTMLやCSSにやっと慣れてきたという方にはJavaScriptはやはり敷居が高く感じてしまいます。私もその一人でした。
また、JavaScriptはユーザー側がブラウザの設定で読み込まないようにできてしまう為、JavaScriptで動きを付けても見て頂けない場合があります。

JavaScriptを使わず、CSSだけでウェブサイトに動きを付けられないかと調べた時に見つけたのが、CSSの「transition」と「animation」です。

「transition」の記述方法

transitionは主に、「:hover」や「:action」の疑似要素を指定する時に使われます。
よく見かけるのが、マウスカーソルを合わせると半透明になったり、背景色が変わったりするボタンです。早速ですが、簡単な指定方法を書いてみました。

デモはこちら

<a class="btn" href="#">ボタン</a>

a.btn {
display:block;
width:200px;
height:100px;
background-color:#000;
color:#fff;
font-weight:bold;
text-decoration:none;
text-align:center;
line-height:100px;
position:absolute;
top:calc(50% - 50px);
left:calc(50% - 100px);
transition:all 1s ease;
}

a.btn:hover {
background-color:#fff;
color:#000;
}

transitionプロパティは、あらかじめ元となる要素に指定しておきます。上記の記述では、ボタンにマウスカーソルを合わせると、背景色と文字色が3秒かけて反転します。
上記のtransitionプロパティはショートハンドで書いていますが、4つのプロパティに分けて書くこともできます。

transition-property（初期値：all）

変化させたいプロパティ名を指定します（color、width等）。allはその要素に指定されているプロパティ全てにアニメーションが付きます。

transition-duration（初期値：0）

変化にかかる時間を指定します。単位は「s（秒）」「ms（ミリ秒）」が指定できます。

transition-delay（初期値：0）

アクションを起こしてからアニメーションが開始するまでの時間を指定します。こちらも単位は「s（秒）」「ms（ミリ秒）」が指定できます。

transition-timing-function（初期値：ease）

変化の度合い（Easing Function）を指定します。値には「ease」や「linear」の他に、「cubic-bezier（x軸,y軸,x軸,y軸）」で数値を指定して細かく指定する方法もあります。ですがcubic-bezierで指定することはほとんどないと思います。
Easing Functionについてこちらのサイトで見やすくまとめられています。

「animation」の記述方法

animationは主に、サイトを開いた時のファーストビューや永久的にanimationを適用したい場合に使われます。animationは単体では実装できず、併せて「@keyframes」プロパティを使う必要があります。

デモはこちら

<div class="wrap">
  <div class="rotate"></div>
</div>

.rotate {
 width:100px;
 height:100px;
 background-color:#00E5FF;
 position:absolute;
 top:calc(50% - 50px);
 left:calc(50% - 50px);
 animation:rotate 3s linear 0s infinite normal forwards running;
}

@keyframes rotate {
 0%{
 transform:rotate(0deg);
 }
 100%{
 transform:rotate(360deg);
 }
}

上記の記述では、要素が永久的に回転します（1回転は3秒）。
まず、「@keyframes」から指定します。

@keyframes 任意のアニメーション名 {
   0% {
      変化を付けたいcssプロパティ名（開始）
   }
   100% {
      変化を付けたいcssプロパティ名（終了）
   }
}

アニメーション名は任意で指定できます（半角英数字）。基本的に0%から100%にかけて変化していきます。
また、指定するcssプロパティは、値が数値で表せるものは徐々に変化しますが、「display:none;」の様な数値で表せないプロパティを指定すると、そのタイミングでカクッと変わります。変化のタイミングは、基本的には%表示で良いと思いますが、上記のように「0%（開始）」と「100%（終了）」のみの指定であれば、それぞれ「from」と「to」でも指定できます。

animationもショートハンドで書く事が出来ます。それぞれ指定する場合は、8つに分けられます。

animation-name

@keyframesで設定した任意のアニメーション名を指定します。

animation-duration（初期値：0s）

アニメーションの開始から終了までの時間です。
単位は「s（秒）」「ms（ミリ秒）」が指定できます。

animation-timing-function（初期値：ease）

変化の度合い（Easing Function）を指定します。値には「ease」や「linear」の他に、「cubic-bezier（x軸,y軸,x軸,y軸）」で数値を指定して細かく指定する方法もあります。ですがcubic-bezierで指定することはほとんどないと思います。
Easing Functionについてこちらのサイトで見やすくまとめられています。

指定できる値

• ease：開始から加速していき、終了にかけて減速します。
• ease-in：加速していき、終了時はピタッと止まります。
• ease-out：弾かれたように開始し、終了にかけて減速します。
• ease-in-out：easeと似た動きをしますが、開始時と終了時はより緩やかに変化します。
• linear：常に一定に変化します。
• cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)：それぞれ値を入力し、好みの変化を付けられます。（詳細については割愛）

• step-start：開始時に終了時の状態に変化します。
• step-end：終了時まで変化せず、終了時に変化します。
  「step-start」と「step-end」は変化は一度きりになります。
• steps(正数, start / end)：正数を入力し、startかendを指定します。
  正数の分、コマ送りにアニメーションが進行します。
  startとendについては上で説明した通りです。

animation-delay（初期値：0s）

アニメーションが開始するまでの時間です。
こちらも単位は「s（秒）」「ms（ミリ秒）」で指定します。

animation-iteration-count（初期値：1）

アニメーションの繰り返し回数を指定します。
永久的にループさせたい場合は「infinite」を指定します。

animation-direction（初期値：nomal）

アニメーションを再生する方向を指定します。

指定できる値

• normal：0%→100%の方向にアニメーションが繰り返されます。
• reverse：100%→0%の方向にアニメーションが繰り返されます。
• alternate：0%→100%、100%→0%、0%→100%の順にアニメーションが繰り返されます。
• alternate-reverse：100%→0%、0%→100%、100%→0%の順にアニメーションが繰り返されます。

animation-fill-mode（初期値：none）

アニメーションの開始時・終了時に適用するcss（0%時のcssプロパティか100%時のcssプロパティか）を指定します。

指定できる値（下記のコード参照）

• none：アニメーションの開始前、終了後は別指定のcssが適用されます。
• forward：開始前は別指定のcssで、終了後は100%のcssが適用されます。
• backwards：開始前は0%のcssが適用され、終了後は別指定のcssが適用されます。
• both：開始前は0%のcss、終了後は100%のcssが適用されます。

このプロパティを使いこなすには「@keyframes」以外に普段cssを記述するような形で、要素にスタイルを指定する必要があります

animation-play-state（初期値：running）

アニメーションの再生・停止を指定できるプロパティです。
疑似要素の「:hover」や「:action」で切り替えたり、ボタンを配置してその選択に応じてコントロールすることもできます。

指定できる値

• running：再生されます。
• poused：停止されます。

まとめ

今日、サイト内に動きを取り入れているサイトが多く見られる様になりました。動きがあるサイトだと、閲覧していて楽しいですよね。最初は少し苦戦するかもしれませんが、使えるようになればより良いサイトが作れると思います。
JavaScriptを使わずに動きを付けられるので、まずは簡単なtransitionからでも試してみては如何でしょうか。

WEBプログラマー ／ I.S