CSSアニメーションの基礎知識のあとに学ぶ応用知識

基礎知識のあとに学ぶ応用知識

この記事ではCSSアニメーションの基礎知識を学んだあとに覚えるべき応用知識について記載する。

ここでいう「基礎知識」とはMDNのCSSアニメーションに書かれているanimationプロパティについて一通りの知識を意味している。

CSS アニメーション - Web developer guide | MDN

デベロッパーツールの使い方

CSSアニメーションで動きを確認するにはChromeのデベロッパーツールを使用すると便利だ。

Sourceパネルに切り替えてCSSのコードを変更すればリアルタイムで変更できるためアニメーションを確認しつつ修正したい時に使うと便利だ。

ちなみにElements -> Stylesからだと@keyframesの変更ができないため注意。

以下のキーボードショートカットを覚えておくとコードを変更する際の作業効率が良いのでおすすめ。

Ctrl + F	現在のファイルから検索
Ctrl + Shift + F	すべてのファイルから検索
Ctrl + Shift + P	セレクタ名を検索
Ctrl + P	ファイルを検索
テキスト選択後 Ctrl + D	複数テキスト選択

あとキャッシュの影響でファイルの修正内容が反映されないことがないようにF1キーを押してSettingsのDisable cache にチェックをいれてキャッシュを無効化しておこう。

アニメーションの一時停止や0.5倍速

Chromeのデベロッパーツールはアニメーションの一時停止や0.1, 0.25, 0.5倍速の変更が簡単にできる。

あらかじめ一時停止ボタンを押しておけばイベント発火で動作するCSSアニメーションの場合でもイベント発火後も一時停止を解除するまではCSSアニメーションが開始されないため重宝する。

特定の要素のアニメーションの停止

デベロッパーツールはアニメーションの一時停止を選択するとすべてのCSSアニメーションが停止してしまう。

特定の要素だけ個別に停止したい場合はanimation-play-state: pausedを指定する。

animation: foo-ani 2s ease-out infinite alternate;
animation-play-state: paused;

fromとtoは使用しない。

@keyframesのfromとtoは0%と100%とほぼ同じ。表記が混合するとまぎらわしいので%で統一する。

ちなみにfromとtoのほうが0%と100%よりも優先順位が高いため
併記された場合はfromとtoのプロパティが適用される。

0px表記を使用しない

0と0pxは同じなので0で統一。特にCSSアニメーションは0を多用するので気をつけたい。

/* bad */
.foo {
  transform: translate3d(0px, 0px, 0px);
}

/* good */
.foo {
  transform: translate3d(0, 0, 0);
}

scale()の使い方に注意

scale()は2つの数値で縮尺比率を指定する。例えばtransform: scale(2)を指定すればxとyの比率は2倍になる。

注意しなければならないのは縮尺比率は左上ではなく中央を基準に変更されるので例えば画面左上に配置した要素をtransform: scale(2)で拡大すると画面外にはみ出してしまう。

また、背景画像が指定されている要素の場合、背景画像も縮尺比率で変更されるため拡大すると画像がぼやけてしまう。

scale()とwidth, heightを使用した拡大縮小サンプル

スマホ対応のためプレフィックスが必須

多くのスマートフォンはanimationにベンダープレフィックスがなければ動作しない。

ベンダープレフィックスなしで動作するバージョン
Android	バージョン5以上
iOS	バージョン9以上

CSSアニメーションのコードを記述する際にはベンダープレフィックスを付け忘れないように必ずCompassを使おう。

/* bad */
.foo {
  animation: foo 2s infinite;
}

/* good */
.foo {
  animation: foo 2s infinite;
  -webkit-animation: foo 2s infinite;
}

/* Compass */
.foo {
  @include animation(foo 2s infinite);
}

Compassを使用する

CSSアニメーションにはベンダープレフィックスが必要不可欠だがこれを手入力で行うと必ず付け忘れが発生するのでCompassを使用してベンダープレフィックスが自動で追加されるようにする。

SASSの@mixinは車輪の再発明になるためanimationでは使用しない。

/* test.scss */
@import "compass/css3";

.foo {
  @include animation(bar 1s ease infinite);
}

Compass実行後は以下のように出力される

/* test.css */
.foo {
  -moz-animation: bar 1s ease infinite;
  -webkit-animation: bar 1s ease infinite;
  animation: bar 1s ease infinite;
}

注意しなければならないのはCompassのcss animations moduleは2012年6月5日にリリースされたバージョン0.13.alpha.0から対応しているため、それ以前のバージョンのCompassでは使用することができない。

COMPASS CHANGELOG

Compassは最新バージョンを入れておこう。

ショートハンドプロパティを使用する

animationのプロパティでよく利用されるのは以下の6種類だ。

※右にあるのは初期値

• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none

これらはショートハンドでこのように記述できる。

.foo {
  animation: bar 1s ease-out 2s infinite alternate forwards;
}

ショートハンドを使用すればコードを短くできるのでこの6種類のanimationプロパティに関しては極力ショートハンドで記述する。

もちろんベンダープレフィックスが必要になるためCompassを使用する。

@import "compass/css3";

.foo {
  @include animation(bar 1s ease-out 2s infinite normal);
}

@keyframesは使用しないことも

簡単な処理は可読性とコード量を減らすために@keyframesは使用しない。

リンクの色がマウスオーバー時に変わったり、データバーで数値の増減のアニメーションなどは直接セレクタ内に記述する。

a {
  color: blue;
  transition: color 1s;
}
a:hover {
  color: red;
}

.bar {
  width: 200px;
  height: 20px;
  border: 1px solid #333;
}

.bar div {
  width: 0%;
  height: 20px;
  background: lime;
  transition: width 3s;
}

.bar:hover div {
  width: 100%;
}

/* これだとアニメーションにならない */
.baz {
  width: 200px;
  height: 20px;
  border: 1px solid #333;
}

.baz div {
  display: none;
  width: 0%;
  height: 20px;
  background: lime;
  transition: width 3s;
}

.baz:hover div {
  display: block;
  width: 100%;
}

ただし、display: none;を使用している場合はプロパティが適用されずdisplay: block;になったときからプロパティが適用される。

width:0%から100%にフェードさせるつもりでも、display: block;が有効になった状態(width:100%)から始まるので注意が必要。このような場合は必ず@keyframesを使用する。

@keyframesを使用しないアニメーションのサンプル

@keyframesは別ファイルで管理

@keyframesを使用したコードは別ファイルにまとめて記載すると管理しやすい。

別ファイルにまとめておけばアニメーションを使用しないページで読み込ませないことでページの読み込みサイズを削減できる。

使えないCSSプロパティ

CSSプロパティの中には使用できるものと使用できないものがある。特に間違えられやすいのはdisplayやvisibilityなどを使用した表示・非表示の切り替えだ。この2つを使用して表示・非表示の切り替えはできない。

表示・非表示にはopacity, scaleを使用する。

点滅させる際の注意

前述の記載したが表示・非表示にはopacity, scaleを使用する。点滅のアニメーションなどによく使用されるが書き方がいくつか存在するので注意が必要だ。

点滅のアニメーションはinfiniteとalternateを使用する場合はalternateなしのものと同時に実行した場合、秒数を合わせたつもりでも。OSやブラウザによってずれが発生してしまう。

詳しくは下記のサンプル参照

CSSアニメーション点滅サンプル

filterプロパティは使わない

CSS Filter Effectsを使用すれば表現の幅が増えるが現在はIE11以下で使用できず、Androidは4.3以下で使用不可のため実質使用できない。

filterプロパティはAndroid 4.3以下が絶滅危惧種になる2017年ごろまで使用は控えよう。

absoluteではなくtranslateを使用する

translateを使用するとGPU処理でCSSアニメーションを行うため処理の負荷がabsoluteより軽く、スムーズに動作する。

GPU処理に関しては下記の記事がわかりやすい。

Web制作にGPU処理を取り入れる

animation-delayにマイナス値を指定

animation-delayはアニメーションがいつ始まるかを指定するためのプロパティで例えば5sを指定すれば5秒後に始まる。

animation-delayはマイナス値も指定でき、-5sと指定すれば最初の5秒後からアニメーションが開始される。

例えば10秒間に青、黄色、赤と変化する以下のようなアニメーションの場合、-5sと指定すれば最初の5秒後（50%の黄色から）始めることができる。

.foo,
.bar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: blue;
}

.foo {
  animation: color-change 10s;
}

.bar {
  animation: color-change 10s -5s;
}

@keyframes color-change {
  0% {
    background: blue;
  }
  50% {
    background: yellow;
  }
  100% {
    background: red;
  }
}

animation-delayにマイナス値を指定したサンプル

animation-nameを""で囲まない

animation: "foo" 2s のようにダブルクォーテーションで囲んでしまうとIEおよびFirefoxでアニメーションが動作しなくなるため囲ってはならない。

animation-nameを""で囲んだサンプル

contentプロパティを使用すると動作しない

contentプロパティを併用しているとAndroid の標準ブラウザでCSSアニメーションが動作しなくなるのでcontentプロパティは付けないようにする。（ChromeおよびiOS Safariは動作する）

Android標準ブラウザはcontentプロパティを使用すると動作しない

animation-fill-modeでスタイルを維持

CSSアニメーションを使用する場合、alternateがなければkeyframesで設定している0%から100%に達するとまた0%に指定いるスタイルに戻ってしまう。

100%に達したスタイルを維持するためにはanimation-fill-mode: forwardsを指定する。

animationプロパティに含める場合は一番最後に記述する。

あとanimation-fill-mode: forwardsはAndroidではバージョンが４以上でなければ正しく動作しない。(ベンダープレフィックスも必要)

-webkit-animation: foo 2s 1 forwards;
animation: foo 2s 1 forwards;

animation-fill-modeのサンプル

webkitAnimationEndを使用する

webkitAnimationEndとはJavaScriptでアニメーションの終了時にイベントを発生させることができる。

これを使用すればkeyframesが100%になったときに.endなどのCSSクラスを追加して100%と同じスタイルを適用すればAndroid 4未満のバージョンでもanimation-fill-mode: forwardsと同じことができる。

さらにアニメーション終了後に別の要素にCSSクラスを追加してCSSアニメーションを開始させることができる。

webkitAnimationEndのサンプル