CSS Animation は一見難しそうに思えますが(事実 難しいです!!)、初心者なら Java script 同様に 先ずはシンプルな構造から手掛けてみましょう。
構成と構図のポイントを考えるのが基本です。
考え方としては、アニメーションですから各シーン(コマ)の繋ぎ合わせを連想します。パラパラ・マンガを思い出してみましょう。
各シーン(コマ)の動作を指定するのは [@keyframes]
[@keyframes
アニメーション名 {from{CSSプロパティ:
値;}to{CSSプロパティ:
値;}}]
又は、
[@keyframes
アニメーション名{0%{CSSプロパティ:
値;}100%
{CSSプロパティ:
値;}}]
と宣言します。
上記の２種類は同様の動きを再現します。記述の種類が多様なので使い分けてみましょう。
前者と後者の記述の違いは[from =
0%],[to = 100%]と理解していただければ良いと思います。
@keyframes に続く アニメーション名
には任意の 名前を付けて識別します。
CSSプロパティについては、CSS(カスケードスタイルシート)で使用するプロパティのほとんどが使用可能です。
同様に、その値についてもCSSの記述と同様です。
それが出来上がったら、アニメーションを加えたいCSSの記述に[animation:
アニメーション名
動作時間 動きの指定 回数(繰り返し等);]と呼び出しの記述を加えるだけです。
※記述の書式は複数有ります。
尚、現在の利用に際して注意点としては、ブラウザによっては未だ未対応の物が存在すると言う事。(※これの制作当時)
それらについては[ベンダープレフィックス]の付与により殆どが解消されますが、この記事を書いた時点では主要ブラウザの殆どは対応済みとなっていましたので付与無でも動きました。(IE
は10以降、Safari Windows版は未対応)
@keyframes で指定が可能な要素は、他に 2D や 3D
に関する事も有り、回転の要素などはアニメーションを構成するにはとても重宝なものとなります。
今回のデモサンプルでもう一つ付け加える点は、@keyframes
の指定の中でシーンのコマ指定の部分に有る%指定の部分についてです。
Web上で調べた限りでは、通常シーン指定は 0% から始まり
100% で完結します (殆ど全てと言っても良いぐらいに) との解説が定説ですが、この例をご覧いただくと解るように、150%
と言うコマ指定にも対応しています。
それをどのように活用するかは制作者サイドのイマジネーションに委ねるところですが、常識的な事を言えば
今回のように上下の２点(dot01,02)を交互に点滅させるには、単純に時間差(１秒間隔の点滅ならば0.5秒の)を設ければ良い事なので特段気に留める必要は有りません。
上記[概念図]をご参照頂ければ、より理解しやすいかと思います。
又、複数の
アニメーション名
を[,]区切りで連ねて使用する事が可能ですから、変化に富んだ連続するアニメーションを制作する事が可能です。
CSS
Animation については いずれ又 別のページでも Note していきたいと思います。