CSS3 Animationのまとめとサンプル集

　このページは、CSS3の使い方のまとめることと、サンプルを集める事を目的にしたページです。

Animationの使い方

CSS3のAnimationは、以下のプロパティを指定することで、アニメーションを実行することが出来ます。
ブラウザのバージョンによっては、「-webkit-」「-moz-」などのベンダープレフィックスが必要です。

プロパティ名	説明
animation-name	アニメーションを規定したkeyframesの名前を指定します。keyframesは後述で説明します。
animation-duration	アニメーションを行う時間を指定します。5sや3000msなどを指定できます。
animation-timing-function	アニメーションの変化量を指定します。ease, linearなどを指定できます。詳細は後述で説明します。
animation-delay	アニメーションを開始する遅延時間を指定します。2sや1000msなどの時間を指定できます。
animation-iteration-count	アニメーションの再生回数を指定します。inifiteを指定すると無限に繰り返します。
animation-direction	アニメーションを複数回再生する際に、再生方向を指定できます。nomalとalternateを指定できます。

CSS3のアニメーションのサンプルです。

#moveBox {
  animation-name: 'a2';
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: nomal;
}
/* または、以下のように纏めて書く事も出来ます */
#moveBox {
  animation: 'a2' 5s ease 0s 1 nomal;
}

keyframesについて

animation-nameで指定するkeyframesは、アニメーションの内容を記述したものとなり、以下のように記載します。
ブラウザのサポート状況によっては、ベンダープレフィックスが必要です。

@keyframes 'a2' {
  0%   {left: 0%;}
  100% {left: 95%;}
}

animation-timing-functionについて

このプロパティには、以下の値を指定することが出来ます。

値	説明
ease	開始と完了を滑らかに変化します。
linear	直線的な変化を行います。
ease-in	ゆっくりと始まります。
ease-out	ゆっくりと終了します。
ease-in-out	ゆっくりと開始/終了します。
cubic-bezier(x1, y1, x2, y2)	変化量を自身で定義できます。制御点2つを指定してベジエ３次曲線を表現します。（*1）

*1 cubil-bezierの設定には、http://www.netzgesta.de/dev/cubic-bezier-timing-function.htmlが便利です。

Animationの再生と停止

CSSでanimationの再生と停止を指定することが出来ます。
CSSで動きの再生/停止を制御できるのは、個人的にびっくりでした。

  /* animationを再生する */
  box.style.webkitAnimationPlayState = "running";

  /* animationを停止する */
  box.style.webkitAnimationPlayState = "paused";

Animationのサンプル

ここでは、制作したアニメーションを掲載したいと思います(・∀・)

色と横幅が変わる

もじもじ文字