アニメーションここではCSS3によるアニメーションを紹介します。デザインCSS【基本編】アニメーションCSSCSS3keyframes[css3]animation[css3]animation-duration[css3]JavaScriptやSVGなどでもアニメーションの表現できますが、気軽に作れる点ではCSS3が一番長けてると思います。幾つかのブラウザでは開発中だったり、古いブラウザでは機能しない場合がありますので、リリース時は各種ブラウザで確認してください。CSS3のアニメーションでは「キーフレーム」を使って動きを定義していきます。アニメーションが完了するまでの時間のどのタイミングで、どのようなスタイルに変化するのかを指定します。そのままに利用しても、いろんな表現ができますが、jQueryなどとの連動をするとさらに複雑なことができます。ここではシンプルなパターンのみをご紹介します。webkit系のブラウザがまだ開発中で、正しく動かない場合はこちらにも同様の記述が必要です。}「name」の部分がアニメーションの名前になり、下記の属性に応じて、各IDやClassに定義していきます。name;アニメーションの名前指定。5s;アニメーションの長さ。:linear;アニメーションの抑揚、スピード調整。5s;アニメーション開始の時間差。animation-iteration-count:5;アニメーションの回数。alternate;アニメーションの再生方向。alternateの逆再生animation-play-state:paused;アニメーションの再生、停止制御。pausedrunninganimation-fill-mode:forwards;アニメーションの再生位置。再生したらそのままキープ。最初から再生、再生したらそのままキープ。forwards;全部まとめて指定。