ゼロから学ぶCSSアニメーション！動きのあるWebデザインの作り方

2025年2月4日

HTML/CSS

目次 [ close ]

はじめに

Webデザインにおいて「動き」はとても重要な要素です。適切なアニメーションを加えることで、ユーザーの目を引き、より魅力的で使いやすいサイトを作ることができます。

しかし、「CSSアニメーションって難しそう…」と感じていませんか？実は、基本さえ押さえれば、簡単なアニメーションなら誰でもすぐに実装できます！

本記事では、初心者の方でも無理なく学べるように、CSSアニメーションの基本から実践的な使い方までわかりやすく解説します。

「ボタンのホバーエフェクトをつけたい」「ふわっと出てくるアニメーションを作りたい」そんな方にぴったりの内容になっていますので、ぜひ一緒にCSSアニメーションを学んでいきましょう！

ゆうや

基本から実践まで、一歩ずつ学んでいけば大丈夫！
一緒に頑張りましょう！

CSSアニメーションの基本

Webサイトに動きをつける方法はいくつかありますが、CSSだけで簡単にアニメーションを実装できるのをご存じですか？

CSSアニメーションを使えば、JavaScriptを使わなくても、要素をスムーズに動かしたり、フェードイン・フェードアウトさせたりといった視覚的な効果を簡単に作ることができます。

基本的なアニメーションを作る方法は大きく分けて2つあります。

transition を使う（シンプルな変化に最適）
@keyframes を使う（複雑なアニメーションが可能）

まずは、それぞれの違いや使い方を詳しく見ていきましょう！

transitionの使い方

transition は、要素のプロパティが変化するときに滑らかなアニメーションをつけるためのCSSプロパティです。例えば、ボタンをホバーしたときに色がふわっと変わるような動きをつけるのに適しています。

基本の書き方は以下の通りです。

CSS

要素 {
transition: プロパティ時間イージング遅延 ;
}

プロパティ	役割	例
transition-property	どのプロパティにアニメーションを適用するか	transition-property: background-color;
transition-duration	変化にかかる時間	transition-duration: 0.5s;
transition-timing-function	変化の加減速	transition-timing-function: ease-in-out;
transition-delay	アニメーションの開始を遅らせる時間	transition-delay: 0.3s;

transition – CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

`@keyframes`の使い方

@keyframes は、複数のステップで要素のスタイルを変化させるためのルールです。
transition では表現しづらい、連続的な動きや複雑なアニメーションを作るときに使います。

基本の書き方は以下の通りです。

css

@keyframes アニメーション名 {
0% {
スタイル1 ;
}
100% {
スタイル2 ;
}
}

例えば、ボックスをふわっと上に浮かび上がらせるアニメーションを作る場合、以下のように書きます。
この @keyframes floatUp を適用するには、animation プロパティを使います。

See the Pen @keyframes by yuya o (@yuya-o) on CodePen.

@keyframes – CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

`animation` プロパティの詳細

animation を使うと、@keyframes で定義したアニメーションを適用できます。

css

要素 {
animation: アニメーション名時間イージング繰り返し;
}

プロパティ	役割	例
animation-name	アニメーションの名前	animation-name: fadeIn;
animation-duration	アニメーションの時間	animation-duration: 2s;
animation-timing-function	速度変化	animation-timing-function: ease-in-out;
animation-iteration-count	繰り返し回数	animation-iteration-count: infinite;
animation-delay	遅延時間	animation-delay: 1s;
animation-direction	再生方向	animation-direction: alternate;
animation-fill-mode	開始前・終了後のスタイル	animation-fill-mode: forwards;

animation – CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

CSSアニメーションの応用

基本的なCSSアニメーションを理解したら、次は より実用的なテクニック を学んでいきましょう！
シンプルなホバーエフェクトやフェードインだけでなく、スクロールに連動したアニメーション や 複数の動きを組み合わせた演出 などを取り入れることで、さらに魅力的なWebデザインを作ることができます。

この章では、実際のWebサイトでよく使われるアニメーションの応用テクニック を紹介します。
「サイトをもっとダイナミックにしたい！」「より洗練された動きを作りたい！」という方は、ぜひ試してみてください！

`:hover`で動きをつける

このコードでは、ボタンにカーソルを乗せると背景色が0.3秒かけて青から緑に変化します。

See the Pen transition by yuya o (@yuya-o) on CodePen.

`:focus` で動きをつける

テキストボックスをクリック（フォーカス）すると背景色が変化します。

See the Pen focus by yuya o (@yuya-o) on CodePen.

ローディングアニメーション

Webサイトやアプリでは、データの読み込み中に ローディングアニメーションを表示することがよくあります。
ここでは、CSSだけで作れるシンプルなスピナー を紹介します！

See the Pen ローディングアニメーション（スピナー） by yuya o (@yuya-o) on CodePen.

See the Pen ドットが跳ねるローディング by yuya o (@yuya-o) on CodePen.

See the Pen 波紋が広がるローディング by yuya o (@yuya-o) on CodePen.

テキストアニメーション

Webサイトやブログの見出しで 文字が表示されるアニメーション を使うと、より視覚的なインパクトを与えられます！

See the Pen テキストが一文字ずつフェードイン by yuya o (@yuya-o) on CodePen.

CSSアニメーションを使う際のポイント

CSSアニメーションを効果的に活用するためには、適切な使い方 や ユーザー体験を考慮した設計 が重要です。
ここでは、アニメーションを使う際に 意識すべきポイント を解説します！

アニメーションには目的を持たせる（視線誘導や操作性向上）
- ただ動かすだけではなく、意味のあるアニメーションを！
- アニメーションはデザインのアクセントとして魅力的ですが、目的がないと逆効果になることもあります。
過剰なアニメーションは避ける（シンプルな動きがベスト）
- アニメーションが長すぎる → ユーザーの操作を妨げる
- 動きが激しすぎる → 視認性が悪くなる
- 多すぎるアニメーション → どこに注目すればいいのか分からなくなる
パフォーマンスを意識する（transform や opacity を活用）
- 重いアニメーションはサイトの読み込み速度を低下させる
ユーザーの好みに配慮する（prefers-reduced-motion の活用）
- 視覚的な刺激が強すぎると、閲覧が辛いユーザーもいる
- アニメーションを最小限に抑えたいユーザー向けに、prefers-reduced-motion を利用するのがベスト！
JavaScriptと組み合わせると表現が広がる（スクロール・クリック連動）
- CSSだけでなく、JavaScriptと組み合わせると表現の幅が広がる！
- 例えば、スクロール時に要素をフェードインさせるには JavaScript を使うと簡単です。