JavaScriptやSVGなどでもアニメーションの表現できますが、気軽に作れる点ではCSS3が一番長けてると思います。
ただし、幾つかのブラウザでは開発中だったり、古いブラウザでは機能しない場合がありますので、リリース時は各種ブラウザで確認してください。
CSS3のアニメーションでは「キーフレーム」を使って動きを定義していきます。アニメーションが完了するまでの時間のどのタイミングで、どのようなスタイルに変化するのかを指定します。
無限ループや、回数指定、逆再生、一時停止などもできます。そのままに利用しても、いろんな表現ができますが、jQueryなどとの連動をするとさらに複雑なことができます。まず、ここではシンプルなパターンのみをご紹介します。
@keyframes name {
0% { スタイルの指定 }
50% { スタイルの指定 }
100% { スタイルの指定 }
}
@-webkit-keyframes name {
webkit系のブラウザがまだ開発中で、正しく動かない場合はこちらにも同様の記述が必要です。
}「name」の部分がアニメーションの名前になり、下記の属性に応じて、各IDやClassに定義していきます。
#demo {
animation: name 3s infinite alternate;
-webkit-animation: name 3s infinite alternate; //webkit系対応
}animation プロパティ
animation-name: name;アニメーションの名前指定。
animation-duration: 5s;アニメーションの長さ。
animation-timing-function :linear;アニメーションの抑揚、スピード調整。
ease 初期値
ease-in
ease-out
ease-in-out
linear
animation-delay: 5s;アニメーション開始の時間差。
animation-iteration-count:5;アニメーションの回数。
数値
infinite 無限
