CSSアニメーションの基本からコピペで使える実例まで徹底解説

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

「サイトにちょっとした動きを足したいけれど、JavaScriptを書くのは少し面倒」——そんなふうに感じたことはありませんか。実は、要素をふわっと表示させたり、くるっと回転させたりする演出の多くは、CSSだけで実現できます。

個人的にWeb制作に携わってきた中で気づいたのは、CSSアニメーションを使いこなせるかどうかで、サイトの印象が大きく変わるということです。ほんの数行のコードで、静かなページが一気に生き生きとした表情を持ちます。

この記事では、CSSアニメーションの基本的な仕組みから、そのままコピペして使える実例、さらに実務で役立つパフォーマンスの考え方まで、順を追って整理していきます。

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

CSSアニメーションとは、その名の通りCSSだけで要素に動きや変化をつける仕組みのことです。

JavaScriptを一切使わなくても、フェードイン、スライド、回転、拡大縮小といった演出が実現できます。ブラウザが標準で備えている機能なので、追加のライブラリを読み込む必要もありません。

この手軽さが最大の魅力です。

HTMLとCSSが少し書ける方であれば、今日からすぐに取り入れられます。デザイン寄りのWeb制作者にとっては、「サイトにひと味加える」ための強力な道具になるはずです。

transitionとの違いと使い分け

CSSで動きをつける方法には、大きく分けて「transition」と「animation」の2つがあります。この違いを理解しておくと、実装で迷うことが減ります。

transitionは、ある状態から別の状態への「変化」をなめらかにつなぐ機能です。たとえばボタンにマウスを乗せたときに色が変わる、といった単純な2点間の変化に向いています。

一方のanimationは、複数の途中経過を細かく指定できます。開始から終了までに何度も色や位置を変えたり、動きを繰り返したりする、より複雑な演出が可能です。

ざっくり言えば、hoverなどきっかけがある単純な変化はtransition、繰り返しや複雑な動きはanimation。この基準で選べば、まず間違いありません。

@keyframesとanimationプロパティの基本

CSSアニメーションは、大きく2つのパーツで成り立っています。「@keyframes」で動きの内容を定義し、「animation」プロパティでそれを要素に適用する、という流れです。

@keyframesで動きを定義する

@keyframesは、アニメーションの「振り付け」を書く場所です。開始時点から終了時点まで、要素がどう変化するかを指定します。

もっともシンプルな例が、じわっと現れるフェードインです。

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

「from」が開始状態、「to」が終了状態を表します。この例では透明度（opacity）を0から1へと変化させ、見えない状態から少しずつ現れる動きを作っています。

途中の状態を細かく指定したいときは、パーセンテージを使います。

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

animationプロパティで適用する

定義した@keyframesを実際に動かすには、animationプロパティで要素に結びつけます。

.box {
  animation: fadeIn 1s ease-in-out;
}

この一行で、「fadeInという動きを1秒かけて、なめらかな加減速で実行する」という指定になります。たったこれだけで、要素がふわっと表示されるようになります。

animationプロパティのパラメータを体系的に理解する

animationは、実は複数の細かい設定をまとめて書けるプロパティです。それぞれの役割を知っておくと、思い通りの動きを細かく調整できます。

これらは一つずつ書くこともできますが、実務ではまとめて指定することがほとんどです。

.box {
  animation: bounce 2s ease-in-out 0.5s infinite alternate;
}

順番は「名前 時間 加減速 遅延 回数 方向」の並びが基本です。特にiteration-countをinfiniteにすると動きが延々と続くので、ローディング表示などに便利。です。

コピペで使えるCSSアニメーション実例集

ここからは、実務でよく使う動きをそのままコピペで使える形で紹介します。クラス名を要素に付けるだけで動きます。

フェードイン

もっとも使用頻度の高い、じわっと現れる動きです。

.fade-in {
  animation: fadeIn 1.2s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

下からスライドイン

フェードインに移動を組み合わせると、より動きのある登場演出になります。

.slide-up {
  animation: slideUp 0.8s ease-out forwards;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

回転

ローディングアイコンなどによく使われる、くるくる回る動きです。

.rotate {
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

拡大縮小

注目を集めたい要素に、ふわっと呼吸するような動きをつけます。

.pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

hoverで動かすボタン

マウスを乗せたときの反応には、transitionを使うと手軽です。

.btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

こうしたホバー演出は、ハンバーガーメニューの開閉アニメーションなどにも応用できます。動きの基本を押さえておくと、UIパーツ全体に自然と活かせるようになります。

動きを起動させるトリガーの種類

アニメーションを「いつ動かすか」も重要なポイントです。主なきっかけは次の3つです。

スクロールに合わせて要素を出現させたい場合は、3つ目のクラス付け替えを使うのが一般的です。純粋なCSSだけでは難しい制御は、少しだけJavaScriptの助けを借りると自然に実現できます。

パフォーマンスと設計のポイント

アニメーションは、使い方を誤ると動きがカクついたり、端末に負担をかけたりします。快適な動きを保つために、いくつか押さえておきたい点があります。

位置を動かしたいときは、topやleftではなくtransformのtranslateを使うのが基本です。ブラウザの処理が効率化され、動きがなめらかになります。

よくある質問

CSSアニメーションはJavaScriptなしで完結しますか

フェードインや回転といった基本的な演出は、CSSだけで完結します。ただし、スクロールに応じて動かしたり、細かいタイミング制御をしたりする場合は、少量のJavaScriptを組み合わせると柔軟に対応できます。

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

まずはtransitionから始めると理解しやすいです。hover時の色変化など身近な例で感覚をつかんでから、より複雑な動きが必要になった段階でanimationへ進むと、無理なく学べます。

アニメーションが動かないときは何を確認すべきですか

よくある原因は、@keyframesの名前とanimation-nameのスペルが一致していない、durationの単位（sやms）を書き忘れている、といった点です。まずはこの2つを見直すと、多くの場合は解決します。

スマートフォンでもきれいに動きますか

transformとopacityを中心に使えば、スマートフォンでも十分なめらかに動きます。逆にwidthやheightを頻繁に変化させると負担が大きくなるため、避けるのが無難です。

動きの速度はどのくらいが適切ですか

登場演出であれば0.3秒から1秒程度が自然に感じられます。長すぎるとユーザーを待たせてしまうため、ローディングなど例外を除き、短めに設定するのが基本です。

まとめ

CSSアニメーションは、@keyframesで動きを定義し、animationプロパティで適用する、という2つの流れさえ理解すれば、驚くほど手軽に扱えます。

まずは今回紹介したコピペコードを実際に貼り付けて、動きを目で確かめてみてください。パラメータを少しずつ変えながら試すことで、感覚は自然と身についていきます。

動きは「多ければ良い」ものではありません。要点を絞り、ユーザーの体験を後押しする形で取り入れることが、心地よいサイトづくりの第一歩になるはずです。まずは一つ、あなたのページにお気に入りの動きを加えてみてはいかがでしょうか。