CSSを使ってアニメーションさせる方法

アニメーションはCSSで作れる

ボタンにマウスを載せた時に背景色を変える、文字色を変えるなどの変化を加える際、普通に作りこむとパッ！っと一瞬で色が変わりますよね。
例えばこんな感じ・・・

なんだか少し味気ないですよね。これが徐々に変化していったら面白くないですか？
実はCSSだけでできるんです。

transitionを使う

アニメーションを付けるにはtransition:all 0.3s;を使います。

transitionは変化させる前の要素に与えることでCSSで指定した変化の前後をtransitionで指定した時間の中で自動補完してくれます。
時間の指定はミリ秒でできるので、細かく調整する事ができます。
例にあげたCSSでは「0.3s」となっているので、0.3秒かけて背景色と文字色が変化します。

背景色と文字色の変化スピードに差を設けるには

先ほどの例では背景色も文字色も同じく0.3秒のアニメーションが作成されています。
でも背景色だけ遅らせたい・早くしたいといった細かな調整にも対応しているんです。

それぞれの設定を変更するには「all」となっている部分を変更します。

このように「background 0.3s;」「color 1.3s;」といったように記述します。
これで個々にアニメーションスピードを変更する事ができるんです。

前に設定されていた「all」は全ての要素に対して時間を設定する書き方です。
個々に設定するには「CSSプロパティを書いてから、半角スペース、秒数」と記述します。

1秒は意外と長い

普段の生活で1秒は短いイメージがある方が多いと思います。
でも実際にアニメーションを作成すると、1秒が長く感じられるはずです。
なので時間指定をする場合は「0.4s」など、短い時間を指定してみてください。

色の変化以外にもアニメーションが付けられる

背景色（background）、文字色（color）の他にも横幅（width）や高さ（height）などの数値で指定できる項目についてはほぼアニメーションを与える事ができます。

たとえばこのようなCSSがあった場合、a要素にマウスカーソルを載せた時には「背景色が青から白」「文字色が白から青」「横幅が60pxから120px」「縦幅が30pxから60px」へと変化するアニメーションが作成されます。

他にもpositionプロパティを使って要素を配置している場合、「top・right・bottom・left」にもアニメーションを付けて要素が移動する動きを作成できますし、「padding・margin」にもアニメーションを付ける事ができます。
このように「00px」や「00em」「00%」などの数値を入れる項目へアニメーションを付けて色々と試してみてください。

レスポンシブWEBデザインの場合は「all」にしない方がいい

レスポンシブWEBデザインで作成したホームページの場合、transitionを与えるときに「all」は控えるようにした方がいい場合が多くあります。
それは画面幅によってCSSに変化を加えることに問題があります。

例えばPC画面で横幅900pxに指定した要素があったとします。そしてそれがタブレットでは750pxになる様にCSSで書かれていたとします。
もしそれにtransitionでアニメーションがついていたら・・・？
そう、パソコンで表示しているブラウザの横幅がタブレットサイズになったとき、900pxから750pxへ変化するアニメーションが付いてしまうんです。
こういった意図しないアニメーションによる見た目上の不具合を抑制する意味合いでも「all」の使用は避けて、変化を加えたい要素にだけアニメーションを付ける様にしておくことをオススメします。

まとめ

・アニメーションを付けるには、「a{}」と「a:hover{}」などを使って変化前後のCSSを作成し、変化前（a{}」へ「transition」を付ける
・transitionはミリ秒で時間を指定できるので「transition:all 0.3s;」といったように記述する
・「all」の部分をCSSプロパティに置き換えれば、要素毎に時間指定ができる
・複数の要素へ時間指定する場合「,(カンマ)」でつなげる