CSS animationの書き方と、コピペして使えるCSSサンプル。

最終更新：2017-09-03 by Joe

CSS アニメーションの書き方、使い方とCSSサンプルをまとめます。CSS animationは、プロパティが多く、また名前が複雑なせいか、いつまでたってもなかなか覚えられません。この記事にたどり着いたあなたも、たぶんそうなのではないでしょうか。

プロパティの仕様自体はそれほど複雑ではないので、この記事では、とにかくすぐコピペして使えるようにまとめました。

1 CSS animation の全プロパティ
2 各プロパティの概要
3 [Tip #1] display:none 要素へのアニメーション適応
4 参考リンク

CSS animation の全プロパティ

さっさと使いたいと思いますので、先に全プロパティです。

下記の例で、値は、animation-name 以外は初期値を記載しています。コメントアウトの中で、パイプで区切って利用可能な値を列挙していますので、適当なものを利用して下さい。

CSS animation のサンプル

.target{
  animation-name: my-animation;
  animation-duration: 3s;
  animation-timing-function: ease; /* ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(0.1, 0.7, 1.0, 0.1)*/
  animation-delay: 0; 
  animation-iteration-count: 1; /* 1 | infinite */
  animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */
  animation-fill-mode: none; /* none | forwards | backwards | both */
  animation-play-state: running; /* running | paused */
}


@keyframes my-animation{
  0% { opacity:1; }
  100% { opacity:0.1; }
}

プロパティの数が多いので、下手にショートハンドにしない方が管理しやすいと、個人的には思います。

ほんとにコピペだけしたい人は、より実用的なｗコメントなしバージョンです。

CSS animation のサンプル（コメントなし版）

.target{
  animation-name: my-animation;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s; 
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}


@keyframes my-animation{
  0% { }
  100% { }
}

CSSのベンダープリフィックスは各自、必要に応じて下さい。こういうのもあります。

https://autoprefixer.github.io/

各プロパティの概要

いちおう少しだけ解説を開催します。だいたいなんとなく分かりますよね。

animation-name

文字列で、後にkeyframesで指定するアニメーションの識別子を指定します。カンマで区切ると複数のアニメーション名を指定できます。name以外のプロパティも同様にカンマで区切って、それぞれのアニメーションの振る舞いを指定します。

animation-duration

アニメーションの全長の長さです。

animation-timing-function

関数名を入力します。Google Chromeの開発コンソールなどを利用すると、細かなアニメーション関数をしていできるでしょう。

animation-delay

アニメーションの開始をどのくらい遅らせるか、指定します。

animation-iteration-count

整数、infinite、少数のいずれかを入力します。infiniteは無限に繰り返します。少数を利用すると、アニメーションの途中で静止させる事もできます。

animation-direction

normal

アニメーションが１周するごとに、初期状態にリセットされてからアニメーションが再び始まります。これがデフォルトです。

reverse

normal の逆です。毎回、逆方向に、最終状態からアニメーションが開始します。このとき、timing-functions の向きの逆になります。「逆回し再生」とイメージすれば良いでしょう。（例えば ease-in のアニメーションは、逆回し再生では ease-out となります。）

alternate

alternateは直訳すると「交互に」という意味です。つまり、normal と reverse を交互に行います。

alternate-reverse

名前から想像がつきますが、初回のアニメーションは逆再生し、その次は順方向に実行します。これを交互に繰り返します。

animation-fill-mode

少しだけトリッキーなプロパティです。アニメーションのkeyframesで指定したCSSプロパティを、アニメーションの開始前、開始後に適応するかどうかを指定します。

none

適応なしです。

forwards

前方方向にのみ適応します。すなわち、keyframesで計算された最後の値をアニメーションの終了後も維持します。アニメーションの方向が逆（reverse)の時でも最後の値を維持します。

backwards

後方にのみ適応します。すなわち、keyframesで計算される一番最初の値をアニメーションの開始前に適応します。特にanimation-delayが設定された時、大きな意味を持ちます。

both

前方、後方、両方にkeyframesで計算される値を適応します。forwards, backwardsを組み合わせた値です。

animation-play-state

paused, runningのいずれかの値を適応し、アニメーションが停止・進行状態を指定します。この値をアニメーションの途中で追加すれば、進行中のアニメーションを停止する事ができます。この値を、javascriptを使って利用すれば、アニメーションの進行をコントロールできるでしょう。

[Tip #1] display:none 要素へのアニメーション適応

display:none で消しておいた要素をアニメーションさせるにはコツが必要です。なぜなら、display:none要素へはいくつかのCSSプロパティが無効化されてしまうからです。

下記のように記述すると、消しておいた要素を表示させて、直後にアニメーションを開始できます。

/* 消しておいた要素を、徐々に表示させる */
@keyframes my-animation{
  0% { display:none },
  1% { display:block; opacity:0 },
  100% { opacity:1 },
}

一度、フレームを区切ると、display:blockに対してアニメーションを開始できるようになります。ラグが気になるようであれば、１％の値をより小さく（0.01%）とすることもできます。

参考リンク

MDN: CSS animation