CSSアニメーションの基本と使い方

animationプロパティ

CSSでアニメーションを実装するにはanimationプロパティを使用します。

animationプロパティは8つのサブプロパティで構成されています。

animationプロパティはこの8つのサブプロパティの一括指定プロパティです。

プロパティ	詳細
animation-name	アニメーションの名前を設定します。
animation-duration	1回のアニメーションが完了するまでの所要時間を設定します。
animation-timing-function	アニメーションの進行方法を設定します。
animation-delay	アニメーションの開始をどれくらい遅延させるかを指定します。
animation-iteration-count	アニメーションが停止するまでにアニメーションを何回再生するか設定します。
animation-direction	アニメーションの再生方向（順方向、逆方向、前後反転）を設定します。
animation-fill-mode	アニメーションの実行前後の状態を設定します。
animation-play-state	アニメーションが実行中か停止中かを設定します。

animationサブプロパティ

animation-name（アニメーション名）

アニメーションの名前を設定します。

例

/* animation-name: 名前 */
animation-name: fadein;

animation-duration（1回のアニメーションが完了するまでの所要時間）

1回のアニメーションが完了するまでの所要時間を設定します。（初期値は「0」）

例

/* animation-name: 時間 */
animation-duration: 2s; /* 2秒 */

animation-timing-function（アニメーションの進行方法）

アニメーションの進行方法を設定します。

例

/* animation-timing-function: 進行方法 */
animation-timing-function: ease-out;

animation-delay（アニメーションの遅延）

アニメーションの開始をどれくらい遅延させるかを指定します。（初期値は「0」）

例

/* animation-delay: 遅延時間 */
animation-delay: 1s;
animation-delay: 1s, 2s; /* 複数アニメーション */;

animation-iteration-count（再生回数）

アニメーションが停止するまでにアニメーションを何回再生するか設定します。（初期値は「1」）

infiniteを指定すると無限に再生します。

例

/* animation-iteration-count: 再生回数 */
animation-iteration-count: 2; /* アニメーションを2回再生 */

animation-direction（再生方向）

アニメーションの再生方向（順方向、逆方向、前後反転）を設定します。（初期値は「normal」）

例

/* animation-direction: 再生方向 */
animation-direction: alternate;

animation-fill-mode（実行前後の状態）

アニメーションの実行前後の状態を設定します。（初期値は「none」）

例

/* animation-fill-mode: 状態 */
animation-fill-mode: forwards; /* アニメーション最後の状態を保持します。 */

animation-play-state（アニメーションの稼働状況）

アニメーションが実行中か停止中かを設定します。

実行中ならrunning、停止中ならpausedを設定します。

例

/* animation-play-state: 実行状態 */
animation-play-state: paused;

animationで一括指定

animationプロパティで8つのサブプロパティを指定すると以下のようになります。

CSS

/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
/* 変化時間 | 進行方法 | 遅延 | 再生回数 | 再生方向 | スタイル | 稼働状況 | 名前 */
animation: 2s ease-out 1s 2 reverse both running fadein;

複数アニメーションを指定する場合、カンマ「,」で区切ります。

@keyframes「キーフレーム」

アニメーションのスタイルは@keyframes「キーフレーム」で定義していきます。

記法は以下の通りです。

CSS

@keyframes アニメーション名 {
  0% { /* アニメーションの進行度合い */
    アニメーション開始時のスタイル
  }
  100% { /* アニメーションの進行度合い */
    アニメーション終了時のスタイル
  }
}

アニメーションの進行度合いが0%、100%の場合、0%を「from」、100%を「to」としても同様の意味になります。

また、アニメーションの進行度合いは0%、50%、100%等と複数指定可能です。

アニメーション名をfadeinと設定した場合、以下のようにして設定します。

CSS

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

アニメーション例 要素をぷかぷか浮かせる

簡単なアニメーションを実装してみましょう。

要素を上下に移動させてぷかぷかと浮かせてみます。

例

<div class="updown"></div>
<style>
  .updown {
    width: 150px;
    height: 150px;
    background: linear-gradient(to bottom right, #808080, #0a0a0a);
    border-radius: 50%;
    margin-top: 20px;
    /* 3秒かけて等速でアニメーションを無限に繰り返す */
    animation: updown 3s linear infinite;
  }
  @keyframes updown {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(15px);
    }
    100% {
      transform: translateY(0);
    }
  }
</style>

まとめ

今回はCSSアニメーションの基本と使い方をご紹介しました。

組み合わせ次第で様々なアニメーションを表現できるので試してみてください。