【簡単】CSSのアニメーションをさまざまな実例を用いて詳しく解説

（最終更新日：2023年6月）

✔このような方へ向けて書かれた記事となります

「アニメーションCSSってどんなことができるのだろうか？」
「アニメーションCSSの適用方法を知りたい」
「アニメーションCSSの具体的な例を見てみたい」

✔当記事を通じてお伝えすること

• アニメーションCSSの概要
• アニメーションCSSの適用方法とその応用
• アニメーションCSSの実例

当記事では、アニメーションCSSの基本概念から応用的な使い方まで、具体的な例を交えてわかりやすく解説しています。

ぜひ最後までお読みいただき、アニメーションCSSを効果的に活用しましょう。

CSSのアニメーションを理解するための前提知識

CSSアニメーションを理解するための前提知識を確認していきます。

• CSSアニメーションの重要性
• アニメーションの基本概念

CSSアニメーションの重要性

CSSアニメーションは、ウェブサイトに動的な要素を追加する強力なツールです。

アニメーションは、ユーザーの視線を誘導したり、クリックやホバーなどのユーザーのインタラクションに反応するエフェクトを作成したりするのに役立ちます。

ユーザーエクスペリエンスが向上し、サイトのエンゲージメントが増える可能性があるでしょう。

アニメーションの基本概念

アニメーションとは、時間的な変化を通じて物体を動かす芸術です。

CSSアニメーションでは、時間の経過に伴うスタイルの変化を制御して、HTML要素を動かせます。

基本的には、アニメーションは開始状態と終了状態、そしてその間の遷移を定義します。

これらはCSSのキーフレームとプロパティを用いて実装されます。

CSSアニメーションの実装手順

CSSアニメーションを実装する基本的な手順について詳しく説明します。

• HTML要素の準備
• アニメーションプロパティを適用
• キーフレームの定義

HTML要素の準備

アニメーションを適用するHTML要素を用意します。

この要素は、divやimg、spanなど、アニメーションを適用したい任意の要素で構いません。

例えばあるdiv要素にアニメーションを適用したい場合、以下のように記述します。

<div id="animated-div">
  Hello, World!
</div>

アニメーションプロパティを適用

次に、CSSを用いてアニメーションを適用します。

アニメーションを適用するには、animationプロパティを使いましょう。

このプロパティはショートハンドプロパティであり、複数のサブプロパティを一度に設定可能です。

例えば、animated-divにアニメーションを適用する場合、以下のように記述します。

#animated-div {
  animation: slide 3s infinite;
}

アニメーション名をslide、アニメーションの時間を3s、アニメーションの反復回数をinfiniteに設定しています。

キーフレームの定義

キーフレームを定義します。

キーフレームは@keyframes規則を使用して定義され、アニメーション名と一致する名前を持つ必要があります。

以下に、slideアニメーションのキーフレームの例を示します。

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

ここでは、アニメーションの開始時点（from）で要素をその場に置き、アニメーションの終了時点（to）で要素を右に100ピクセル移動させることを指定しています。

アニメーション効果の設定方法

それではCSSアニメーションをより具体的に制御するための方法を見ていきましょう。

以下の各節で解説します。

• アニメーション名の指定
• 開始・終了時の状態
• アニメーションの長さ
• 動きをループさせる
• 進行具合の操作
• 開始の遅延設定
• 再生の向き

アニメーション名の指定

まずはアニメーション名の指定から始めます。

アニメーション名は、@keyframes規則で定義した名前を、animation-nameプロパティで指定します。

以下の例では、slideという名前のアニメーションを指定しています。

#animated-div {
  animation-name: slide;
}

開始・終了時の状態

アニメーションの開始時と終了時の状態を指定します。

これは@keyframes規則内でfromとtoキーワードを使って定義します。

fromはアニメーションの開始状態、toは終了状態を表します。

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

アニメーションの長さ

アニメーションの長さは、animation-durationプロパティを用いて指定します。

以下の例では、アニメーションの長さを3秒に設定しています。

#animated-div {
  animation-duration: 3s;
}

動きをループさせる

アニメーションは一度だけ再生させることもできますが、animation-iteration-countプロパティを使って何度もループさせることが可能です。

値には任意の数値を指定でき、infiniteを指定すると無限にアニメーションを繰り返します。

#animated-div {
  animation-iteration-count: infinite;
}

進行具合の操作

animation-timing-functionプロパティはアニメーションの進行具合を制御します。

これによりアニメーションの中間状態を指定することができ、一定の速度でアニメーションさせるだけでなく、加速や減速をおこなえます。

#animated-div {
  animation-timing-function: ease-in;
}

開始の遅延設定

アニメーションの開始を遅延させるには、animation-delayプロパティを使います。

以下の例では、アニメーションの開始を2秒遅らせています。

#animated-div {
  animation-delay: 2s;
}

再生の向き

アニメーションの再生方向を制御するanimation-directionプロパティについて説明します。

このプロパティを使用すると、アニメーションを逆再生させたり、行き来させたりすることができます。

#animated-div {
  animation-direction: alternate;
}

CSSアニメーションのプロパティ一覧

以下は、CSSのanimationプロパティについての一覧表です。

プロパティ名	説明	例
animation-name	アニメーションの名前	animation-name: my-animation;
animation-duration	アニメーションの時間	animation-duration: 2s;
animation-timing-function	アニメーションの速度曲線	animation-timing-function: ease-in-out;
animation-delay	アニメーションの開始遅延	animation-delay: 1s;
animation-iteration-count	アニメーションの繰り返し回数	animation-iteration-count: infinite;
animation-direction	アニメーションの再生方向	animation-direction: alternate;
animation-fill-mode	アニメーションの終了時のスタイル	animation-fill-mode: forwards;
animation-play-state	アニメーションの再生/停止状態	animation-play-state: paused;

これらのプロパティを使用することで、要素にアニメーション効果を追加し、動的なコンテンツを作成することができます。

CSSアニメーションの例

前章ではアニメーション効果の設定方法を説明しました。

ここでは、具体的なCSSアニメーションの例を以下の項目でご紹介します。

• フェードイン・フェードアウト
• スライドショー
• 拡大縮小効果

フェードイン・フェードアウト

フェードイン・フェードアウトは、最も基本的なアニメーションのひとつです。

以下のように@keyframesでアニメーションを定義し、opacityプロパティで透明度を変化させることで実現できます。

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#animated-div {
  animation-name: fade;
  animation-duration: 2s;
}

スライドショー

スライドショーは画像などの要素を順に表示するアニメーションで、@keyframesで位置の変化を指定することで実現できます。

以下の例では、要素が右から左へと移動するアニメーションを作成しています。

@keyframes slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

#animated-div {
  animation-name: slide;
  animation-duration: 2s;
}

拡大縮小効果

最後に、要素を拡大・縮小させるアニメーションを作成してみましょう。

transformプロパティのscale()関数を使って要素の大きさを変化させることができます。

@keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

#animated-div {
  animation-name: scale;
  animation-duration: 2s;
}

アクセシビリティとパフォーマンスの向上

CSSアニメーションを使用する際に重要な視点となるのが、アクセシビリティとパフォーマンスです。

• アニメーションの反復設定
• タイムリングの調整
• 公式定義と形式文法

アニメーションの反復設定

animation-iteration-count: infinite;

アニメーションを無限に繰り返す設定は見た目は魅力的ですが、不適切な場合もあります。

これは、ブラウザがアニメーションを描画し続けるため、パフォーマンスに影響を及ぼす可能性があるからです。

必要な場合のみこの設定を使用し、できるだけ適切な反復回数を指定することが推奨されます。

タイムリングの調整

CSSアニメーションは、タイムラインに基づいて動作します。

アニメーションの持続時間、遅延、反復回数などを制御するためです。

これらの値を適切に設定すれば、アニメーションのパフォーマンスが向上します。

例えば、アニメーションの持続時間が長すぎると、ユーザーはアニメーションの完了を待つことになり、体験が悪化する可能性があります。

公式定義と形式文法

CSSアニメーションは、W3Cによって規定されている標準に基づいています。

• アニメーションを適用できるプロパティ
• アニメーションに関連するすべてのCSSプロパティの詳細な定義

この公式文書を参照することで、パフォーマンスやアクセシビリティの観点から最適なアニメーションを設計できます。

オススメのCSSアニメーションライブラリ・ツール

CSSアニメーションの開発を支援するライブラリとツールを3つご紹介します。

これらのツールは、より効率的に、より洗練されたアニメーションを作成するための強力なサポートを提供します。

• Animate.css
• Bounce.js
• Stylie

Animate.css

Animate.cssは非常に人気のあるCSSアニメーションライブラリです。

50種類以上の準備済みアニメーションを提供しており、使用方法もシンプルで簡単。

アニメーションを適用したい要素に対して、適切なクラス名を追加するだけで、綺麗なアニメーションを実装することが可能です。

Bounce.js

Bounce.jsはJavaScriptライブラリで、CSSアニメーションを生成し、カスタマイズできます。

強力なGUIエディタを提供しており、直感的にアニメーションの挙動を制御したり、複数のアニメーションを組み合わせたりすることが可能です。

生成されたアニメーションはCSSフォーマットで出力され、あらゆるウェブプロジェクトで利用できます。

Stylie

Stylieはウェブ上で動作するアニメーションエディタで、CSSアニメーションの生成をサポートします。

視覚的なインターフェイスでアニメーションを作成し、生成されたCSSコードをコピーしてプロジェクトに適用可能です。

また、複雑なアニメーションを作成するための高度な機能も提供しています。

まとめ

CSSアニメーションは、ユーザー体験を向上させるための重要なツールであることを理解して頂けたかと思います。

アニメーションはサイトの視覚的な要素を強化し、ユーザーがサイト内を自然に移動するのを助けるもの。

JavaScriptと組み合わせることで、より複雑で洗練されたアニメーションも可能となります。

CSSアニメーションの基本を理解した上で、さらに深く掘り下げることで、アニメーションの可能性を最大限に引き出せるでしょう。

当記事を通して、CSSアニメーションの基本的な概念と実装方法について理解を深めることができましたら幸いです。

引き続き学習に励み、自分だけの魅力的なウェブページを作成していきましょう。