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

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

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

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

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

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

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

CSSアニメーションの基本

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

@keyframes

アニメーションの動きを定義する部分です。「どのタイミングで、どのように変化するか」を記述します。例えば、色が変わる、位置が移動するなど、アニメーションのステップを設定します。

@keyframesの基本構造

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

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

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

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

例えば、ある要素を上から下に移動させるシンプルなアニメーションを定義するには、以下のように記述します。要素が上から下（Y方向）に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

定義した @keyframes を実際に要素に適用するためのCSSプロパティです。「どのアニメーションを使うか」「どれくらいの時間で動くか」「何回繰り返すか」などを指定します。

.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-フェードイン

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

フェードインするニメーション

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

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

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

2-バウンド

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

この例では、.element-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;
}

3-スライドして表示

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

スライドするニメーション

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

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

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

4-回転

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

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

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

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

5-色の変更

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

アニメーションの要素

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

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

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

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

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

縮小拡大するアニメーション

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

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

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

7-点滅

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

点滅するアニメーション

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

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

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

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

まとめ

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

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

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

アニメーションを使ったCSSで複数画像を切り替える方法（スライダー）もあります。

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

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