CSSアニメーションの基礎から実践まで初心者向け完全ガイド

折原 慧ウェブデザインデイ 編集ライター

ウェブサイトに少し動きを加えるだけで、印象は大きく変わります。ボタンにマウスを乗せたときにふわっと色が変わったり、ページを開いた瞬間に文字がスッと現れたり。こうした演出の多くは、実はJavaScriptを使わずCSSだけで実現できます。

個人的な経験では、コーディングを始めたばかりの頃は「アニメーションは難しそう」と敬遠していました。ですが、仕組みを理解すると驚くほどシンプルで、むしろ楽しく感じられるようになりました。

この記事では、transitionとanimationの違いから、実際にコピペして使えるサンプルコードまで、順を追って解説していきます。

CSSアニメーションとは何か

CSSアニメーションとは、JavaScriptを使わずにHTML要素へ動きや変化をつける仕組みのことです。色が変わる、位置が動く、大きさが変わるといった演出を、スタイルシートだけで表現できます。

大きく分けて、2つの方法があります。

ひとつはtransition（トランジション）。もうひとつがanimation（アニメーション）です。この2つの違いを理解することが、最初の重要なステップになります。

transitionとanimationの違いと使い分け

多くの入門記事で繰り返し語られているのが、「簡単な変化はtransition、複雑な動きはanimation」という線引きです。この考え方を押さえておくと、迷ったときの判断基準になります。

たとえば「マウスを乗せたら背景色が変わる」「ボタンを押したときだけ動く」といった状態の変化にはtransitionが適しています。一方で「常に動き続ける」「複数の段階を経る複雑なシーケンス」にはanimationが向いています。

transitionの基本的な書き方

transitionは、あるプロパティが変化するときに、その変化を滑らかにつなぐ役割を持ちます。書き方はとてもシンプルです。

たとえば、ボタンにマウスを乗せると背景色がゆっくり変わる例を見てみましょう。

.button {
  background-color: #6366f1;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #4f46e5;
}

transition: background-color 0.3s ease; は「背景色を0.3秒かけて滑らかに変化させる」という意味です。easeは変化のスピードの緩急を指定する部分になります。

animationと@keyframesの書き方

animationを使う場合は、@keyframesとセットで書くのが基本です。@keyframesで「どのように動くか」を定義し、animationプロパティで「どの要素にどう適用するか」を指定します。

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.box {
  animation: fadeIn 1s ease forwards;
}

この例では、要素が1秒かけて透明から不透明へと変化します。forwardsはanimation-fill-modeという設定で、アニメーション終了後の状態を維持する役割を持っています。

animationプロパティの役割と書く順番

animationは複数の設定をまとめて書けるショートハンドです。それぞれのプロパティが何を担当しているか、整理しておきましょう。

ショートハンドで書く場合は、時間の値のうち最初に書いたものがduration、2番目がdelayとして解釈されます。この点だけ注意しておけば、あとは順番はそれほど神経質にならなくても動作します。

コピペで使える実用サンプル集

ここからは、実際の現場でよく使う定番の演出を紹介します。どれもコピペしてすぐに試せるものばかりです。

フェードイン

ページを開いたときに要素がふわっと現れる、もっとも使用頻度の高い演出です。

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

スライドイン

横からスッと入ってくる動きです。translateXの値を変えることで、左右どちらからでも登場させられます。

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-in {
  animation: slideIn 0.6s ease forwards;
}

拡大縮小の繰り返し

ボタンなどをやさしく脈打たせて、注目を集める演出です。infiniteで無限に繰り返します。

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.pulse {
  animation: pulse 1.5s ease infinite;
}

ちなみにハンバーガーメニューのような開閉するUIも、ハンバーガーメニューの実装においてtransitionと組み合わせると、より洗練された動きになります。

アニメーションを使うときの注意点

動きは便利ですが、使いすぎると逆効果です。私自身、以前あるサイトで要素という要素すべてにアニメーションをつけたところ、かえって落ち着かない印象になってしまった経験があります。

また、動きの速さに敏感なユーザーへの配慮として、prefers-reduced-motionという設定を使い、アニメーションを控えめにする対応も広まってきています。誰にとっても快適なサイトを目指すうえで、覚えておきたい視点です。

CSSとJavaScriptの使い分け

基本的な動きはCSSで十分に対応できます。しかし、スクロール位置に応じて動かしたい、クリックした回数によって動きを変えたいといった複雑な条件分岐が必要な場合はJavaScriptの出番です。

まずはCSSで実現できないか検討し、難しい部分だけJavaScriptで補う。この順番で考えると、コードがシンプルに保てます。動的なライブラリを読み込む際は、jQuery CDNの導入方法を参考にすると手早く環境を整えられます。

よくある質問

transitionとanimationはどちらを先に覚えるべきですか

まずはtransitionから始めることをおすすめします。書き方がシンプルで、hover時の変化など効果を体感しやすいためです。慣れてきたら@keyframesを使うanimationに進むと、無理なくステップアップできます。

アニメーションが動かないときはどこを確認すればいいですか

最初に確認したいのはduration（時間）の指定です。次に@keyframesの名前とanimation-nameが一致しているか、そしてセレクタが正しく要素を指しているかを見直します。多くの場合、この3点のどこかに原因があります。

スマートフォンでもCSSアニメーションは動きますか

はい、主要なスマートフォンのブラウザで問題なく動作します。ただし端末の性能によっては重い処理でカクつくことがあるため、transformやopacityを中心に使い、負荷を抑える設計が大切です。

複数のアニメーションを同時に使ってもいいですか

カンマで区切ることで、ひとつの要素に複数のアニメーションを適用できます。ただし数が増えるほど管理が難しくなるため、本当に必要なものに絞ることをおすすめします。

アニメーションの速度はどのくらいが適切ですか

一般的には0.2秒から0.8秒程度が自然に感じられることが多いです。速すぎると気づかれず、遅すぎると待たされる印象になります。実際に画面で確認しながら、少しずつ調整していくのが確実です。

まとめと次のステップ

CSSアニメーションは、transitionとanimationの違いを理解すれば、思いのほか簡単に扱えます。まずは今回紹介したフェードインやスライドインのサンプルをコピペして、実際に動かしてみてください。

手を動かして「動いた」という体験を重ねることが、上達への一番の近道です。少しずつ演出のバリエーションを増やしながら、あなたのサイトに心地よい動きを加えていきましょう。

より幅広いデザインの引き出しを増やしたい方は、ウェブデザインの参考事例にも目を通しておくと、アニメーションを使う場面のイメージが具体的になります。