はじめに

こんにちは、Lupusdogと申します。音楽好きの犬です。
今回はCSS Animationの使い方について解説していこうと思います。

アニメーションが必要な開発現場はそれほど多くないかなとは思いますが、
そういった現場でこそ、ちょっとアニメーションを付けたい等の要望があった時に
他のメンバーに対してドヤれると思うので、ぜひ本記事を読んでいってください。

CSS Animationとは

そもそもの話としてCSS Animationとは何でしょうか？
CSS Animationとは文字通りCSSでアニメーションを実現する機能です。

例えばどんなことができるかというと、以下のようなことができます。

これは自分が尊敬するyui540さんの作品例なのですが、
"凄い！こんなことまでできちゃうの！？" って思いますよね。

本記事では、こういったアニメーションを実現するために必要なCSS Animationの基礎を解説したいと思います。

CSS Animationの仕組み

@￰keyframes

アニメーションを実現する仕組みとして、まず覚えてほしいのはCSSの@keyframesという機能です。これはアニメーションの内容を保存しておける、変数のような役割を果たします。

具体的には以下のように記述します。

/* "color-changing"はkeyframeの名前 */
@keyframes color-changing {
  0% {
    background-color: red;
  }

  50% {
    background-color: blue;
  }

  100% {
    background-color: yellow;
  }
}

このようにアニメーションの各段階で対象の要素がどういった状態であるかを定義することで、滑らかに状態が変化するアニメーションを作成することができます。

この例で言うと最初は赤色で始まり、中間地点で青色になって、最後は黄色に変化します。

実際に画面でアニメーションを実行するとこのようになります。

ちなみにですが、@keyframesにはfrom, toという記述方法もあります。
これはfromが最初の状態、toが最後の状態を表しています。

つまり先程の例で言うと下記のように記述することも可能です。

@keyframes color-changing {
  from {
    background-color: red;
  }

  50% {
    background-color: blue;
  }

  to {
    background-color: yellow;
  }
}

animationプロパティ

@keyframesによるアニメーションの作成自体は完了しましたが、この時点ではアニメーションをHTML要素に適用することはできていません。

実際にアニメーションを適用するためには、CSSセレクタにanimationプロパティの設定をすることが必要です。

animationプロパティには、以下のような種類があります。

animation /* すべてを一括で設定できるショートハンド */
animation-name /* 使用する@keyframesの名前を指定 */
animation-duration /* アニメーションの実行時間を指定 */
animation-timing-function /* アニメーションの緩急を設定できる */
animation-delay /* アニメーションの実行を遅延させられる */
animation-iteration-count /* アニメーションの実行回数を指定 */
animation-direction /* アニメーションの進行方向を指定 */
animation-fill-mode /* アニメーション前後の状態を維持する設定 */
animation-play-state /* アニメーションの一時停止を行う設定(running/paused) */

プロパティについて解説し始めると本当に長くなってしまいますので、詳細は他の情報源を参照して下さい。おすすめのサイトを2つ紹介しておきます。

概要を知りたい場合はこちら

詳しく知りたい方はこちら

では、これらのanimationプロパティを使ってアニメーションの設定をしていきます。

サンプルコードは下記のとおりです。
こちらでは、box-animationクラスに対してアニメーションを設定しています。

.box-animation {
  animation-name: color-changing; /* @keyframesのcolor-changingを指定 */
  animation-duration: 5s; /* 5秒かけてアニメーションを実行 */
  animation-fill-mode: forwards; /* アニメーション実行後の状態を維持　*/
}

基本的には好きなanimationプロパティを設定していただければ良いのですが、最低限animation-nameとanimation-durationが無いと動作しない点は覚えておいてください。

そしてbox-animationクラスを要素につけるとアニメーションが行われるようになります。

<div class="box box-animation"></div>

直接記述する方法だとページが読みまれた時点でアニメーションが始まってしまうので、特定のユーザー操作時に再生したい場合はbutton.onclick等のイベントリスナーにてbox-animationを付与すると良いでしょう。

まとめ

まとめるとCSS Animationの使い方は以下のとおりです。

@keyframesでアニメーションを作成する
animationプロパティで、クラスセレクタにアニメーション再生設定をする
プロパティを記載したクラスを指定の要素に付与する

CSS Animationの基礎としては、これが分かっていれば十分だと思います。
あとは実際にコードを触りながら色々と学んでいきましょう。

おまけ

本記事で紹介したサンプルコードが実際に動いているサンドボックス環境を配布します。
文字で読むより触ってみて体験するほうがわかりやすいと思うので、ぜひ色々やってみてください。

CSS Animationについてゲーム形式で学べるサイトがあります。
すっごく楽しいので、時間がある方は是非どうぞ。

さいごに

本記事を最後まで読んでいただきありがとうございます。
少しはCSS Animationに興味を持っていただけたでしょうか。

CSSのコーディングというと比較的単純な作業というイメージがあるかと思います。
しかしながら現代のCSSは複雑な仕様がたくさん導入されており、探求してみると意外に面白いと思います。

本記事を通してCSSに魅せられたCSSerが増えることで、手の込んだリッチなサイトが多く生まれるようになり、インターネッツがより豊かになることを願っています。

追伸

さわらつき先生のCSS Kawaiiロゴ来ないかな....

参考文献