サイトにリッチな「動き」をつけるCSSアニメーション／基本的な指定方法を覚えよう

この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。

サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつけることができます。

サイトに視覚的な変化をつけたり、読者のページ離脱を遅らせるメリットも期待できます。

ネットで検索すると実装例がいくつも掲載されていますが、初めからコピペに頼ってしまうと部分的にカスタマイズしたいときや不具合が起こった際に自力で解決できません。まずはアニメーションの仕組みを学び、基礎を知ることをおすすめします。

いくつかアニメーションの具体例も掲載しているので、アニメーションを使ってみたい！と興味のある方はお試しくださいね。

• パーツのサンプルコードもzipでまとめてダウンロードできます
• 購入者に嬉しい特典あり

CSSアニメーションの基本

CSSアニメーションを指定するには、主に以下の2つのプロパティを使用します。

@keyframes

@keyframesは、CSSアニメーションの一連のステップを定義します。アニメーションの開始から終了までの各段階でどのようなスタイルを適用するかを指定できます。

@keyframesの基本構造

それぞれアニメーションの開始（0%）と終了（100%）を示します。

/*アニメーションの開始から終了までを指定する*/
@keyframes animation-name {
  0% {
    /* 初期状態のスタイル */
  }
  100%{
    /* 最終状態のスタイル */
  }
}

0%~100%はfrom と to でも代用でき、同じ意味です。

/*アニメーションの開始から終了までを指定する*/
@keyframes animation-name {
  from {
    /* 初期状態のスタイル */
  }
  to {
    /* 最終状態のスタイル */
  }
}

例えば、ある要素を上から下に移動させるシンプルなアニメーションを定義するには、以下のように記述します。要素が上から下に50px移動します。

@keyframes moveDown {
  from {
	  transform: translateY(0);
  }
  to {
	  transform: translateY(50px);
  }
}

ステップを細かく指定する

@keyframesでは、アニメーションの途中のステップも細かく指定できます。パーセンテージ（0%～100%）を使って各段階のスタイルを定義します。

この例は、要素の色を徐々に変化させるアニメーションです。

@keyframes changeColor {
  0% {
	  background-color: pink;
  }
  50% {
	  background-color: lightblue;
  }
  100% {
	  background-color: yellow;
  }
}

animation

animationプロパティは、アニメーションの詳細（名前、１回分の時間、進行速度の変化など）を指定し、要素に適用します。

.element {
  animation: moveRight 2s linear infinite;
}

アニメーションはまとめて指定すると便利！

具体例

この例では、.elementクラスの要素に対して、moveDownという名前のアニメーション（要素が上から下に50px移動する）が2秒間、一定のタイミングで無限に繰り返されます。

アニメーションの要素

@keyframes moveDown {
  from {
	  transform: translateY(0);
  }
  to {
	  transform: translateY(50px);
  }
}
.element {
	animation: moveDown 2s linear alternate infinite;
}

CSSアニメーションのサブプロパティ

animationプロパティは複数のサブプロパティを短縮して使用できますが、個別に指定することも可能です。以下は、主要なサブプロパティです。

animation-name／アニメーションの定義名

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

アニメーションの定義名は自由に決めてOK。（半角英数字）animation-nameにつけた定義名に対し、keyframesでアニメーションの開始から終了までの変化を指定します。

.element {
  animation-name: moveRight;
}

animation-duration／１回分の時間の長さを指定

アニメーションの持続時間を指定します。

値の単位

• s: 秒（例：2s は2秒）
• ms: ミリ秒（例：500ms は0.5秒）

.element {
  animation-duration: 2s;
}

animation-timing-function／進行速度の変化を指定

アニメーションの進行速度の変化を指定します。指定しない場合は初期値のeaseが適応されます。

.element {
  animation-timing-function: linear;
}

• ease→初期値：開始時と終了時が緩やかに変化
• ease-in→開始時は緩やかに変化、終了に近づくと早く変化
• ease-out→開始時は早く変化し、終了時は緩やかに変化
• ease-in-out→開始時と終了時は、かなり緩やかに変化
• linear→開始から終了まで一定に変化
• steps(数値, start または end)→パラパラ漫画のように数値をコマ数で変化
• cubic-bezier（数値をカンマ区切りで4つ指定）→変化の進行割合を3次ベジェ曲線で指定

animation-timing-functionの実際の動作

ease

linear

ease-in

ease-out

ease-in–out

animation-delay／開始を遅らせる

アニメーションの開始を遅らせる時間を指定します。

.element {
  animation-delay: 1s;
}

3秒なら→3s（初期値は0）

animation-iteration-count／繰り返し回数を指定

アニメーションの繰り返し回数を指定します。

.element {
  animation-iteration-count: infinite;
}

• 数値→数値で再生回数を指定する（初期値は1）
• infinite→無限に再生を繰り返す

animation-direction／方向を指定

アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを決めます。

.element {
  animation-direction: alternate;
}

• normal→初期値：順方向の再生で動きます
• reverse→逆方向の再生で動きます
• alternate→奇数回では順方向、偶数回では逆方向の再生で動きます。継ぎ目が不自然にならずに滑らかな繰り返しが可能です。
• alternate-reverse→アニメーションは逆方向から始まり、奇数回では逆方向、偶数回では順方向に動きます。

animation-fill-mode／再生中・再生後のスタイルを指定

アアニメーションの再生中・再生後のスタイルを指定します。

.element {
  animation-fill-mode: forwards;
}

• none→初期値。スタイルを指定しません。アニメーション再生後は元のスタイルが適用されます。
• backwards→アニメーション再生後は、最初のキーフレーム（0%）のスタイルが適用されます。
• forwards→アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用されます。animation-delay の間は @keyframes の0%のスタイルが適用されます。
• both→backwardsとforwardsの両方を適用した状態。animation-delay の間は キーフレーム（0%）の表示、再生後はキーフレーム（100%）のスタイルが適用されます。

animation-play-state／アニメーションの再生状態を指定

アニメーションの再生状態を指定します。

.element {
  animation-play-state: paused;
}

• running：アニメーションを再生可能な状態にします。(初期値)
• paused：アニメーションをポーズ(一時停止)の状態にします。

CSSアニメーションの具体例

CSSアニメーションの具体例をいくつかピックアップします。

1-フェードイン

要素が徐々に表示されるアニメーションです。定番中の定番でフェードインが使われているサイトは数多くあります。

アニメーションの要素

/*フェードイン*/@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element-1 {
  animation: fadeIn 2s ease-in;
}

この例では、.element-1クラスの要素が2秒かけて徐々に表示されます。（表示を分かりやすくするため、ここでは無限繰り返しを追加しています）

2-バウンド

要素がバウンドするように動くアニメーションです。

/*バウンド*/
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.element-2 {
  animation: bounce 2s infinite;
}

この例では、.element-2クラスの要素が2秒かけてバウンドするように動き、無限に繰り返されます。

3-スライドして表示

要素を左から右にスライドして表示するアニメーションです。

アニメーションの要素

/*文字をスライドして表示*/
@keyframes slide {
  from {
 width:0;
  }
  to {
 width:100%;
  }
}

.element-3 {
  white-space:nowrap;
  overflow:hidden;
  animation: slide 3s linear infinite;
}

この例では、.element-3クラスの要素が左から右に2秒かけてスライド表示されます。

4-回転

要素が360度回転するアニメーションです。

/*回転*/
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.element-4 {
  animation: rotate 3s linear infinite;
}

この例では、.element-4クラスの要素が3秒かけて360度回転し、無限に繰り返されます。

5-色の変更

要素の背景色が徐々に変わるアニメーションです。

アニメーションの要素

/*色の変更*/
@keyframes changeColor {
  0% {
    background-color: pink;
  }
  50% {
    background-color: lightblue;
  }
  100% {
    background-color: yellow;
  }
}

.element-5 {
  animation: changeColor 5s ease-in-out infinite;
}

この例では、.element-5クラスの要素が5秒かけてピンクから水色、そして黄色に背景色が変わり、無限に繰り返されます。

6-縮小拡大アニメーション

要素が縮小してから拡大するアニメーションです。

アニメーションの要素

/*拡大縮小*/
@keyframes scaleUpDown {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
}

.element-6 {
  animation: scaleUpDown 4s ease-in-out infinite;
}

この例では、.element-6クラスの要素が4秒かけて1倍から.8倍に縮小し、再度1倍に戻るアニメーションが無限に繰り返されます。

7-点滅

要素が点滅するアニメーションです。

アニメーションの要素

/*点滅*/
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.element-7 {
  animation: blink 1s step-start infinite;
}

この例では、.element-7クラスの要素が1秒かけて点滅し、無限に繰り返されます。

より滑らかに点滅するアニメーションをこちらの記事に掲載しています！

まとめ

CSSアニメーションを使用することで、ウェブページに動きを加えることができます。

基本的な@keyframesとanimationプロパティの使い方を理解することで、さらに複雑なアニメーションを簡単に作成することができます。

また、マウスオーバー時にボタンの色を変えるなど、滑らかな動きにする場合に便利な「transition」プロパティを解説しています。@keyframesの設定が必要なく、シンプルで簡単なアニメーションを追加できますよ。

これらの記事を参考に、さまざまなアニメーションを試してみてください。

• パーツのサンプルコードもzipでまとめてダウンロードできます
• 購入者に嬉しい特典あり