CSSアニメーション入門｜@keyframesとanimationの使い方・transitionとの違い

Webサイトでボタンにマウスを乗せると色がふわっと変わったり、メニューがすっと滑り込んできたり、読み込み中のアイコンがくるくる回り続けたり……こうした「動き」の多くは、CSSアニメーションだけで作られています。JavaScriptを一行も書かなくても、CSSの記述だけで要素を時間に沿って変化させられるのです。本記事では、CSSアニメーションの基本である@keyframesとanimationプロパティの使い方を、初心者の方に向けて順を追って解説します。

CSSアニメーションとは

CSSアニメーションとは、CSSだけで要素の見た目を時間とともに変化させる仕組みです。色・位置・大きさ・透明度・回転角といったプロパティを、「開始状態」から「終了状態」へ、あるいは途中の段階を細かく指定しながら、なめらかに移り変わらせることができます。

CSSアニメーションは大きく二つの要素から成り立ちます。一つは、どのプロパティをどう変化させるかという動きの設計図（@keyframes）。もう一つは、その設計図を「何秒かけて」「どんな速度変化で」「何回」再生するかを指定するanimationプロパティです。設計図と再生設定を分けて考えると、CSSアニメーションは一気に理解しやすくなります。

JavaScriptを使わずに動きを表現できるため、記述がシンプルで、ブラウザによる最適化も効きやすいのが大きな利点です。ホバー時のちょっとした演出から、ローディングスピナー、注目してほしい要素の点滅まで、幅広い場面で活躍します。

@keyframesで動きを定義する

動きの設計図を書くのが@keyframesルールです。アニメーションに名前を付け、再生の進行度（0%から100%、またはfromとto）ごとにスタイルを指定します。

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

これは「fade-in」という名前のアニメーションで、開始時（from＝0%）は透明、終了時（to＝100%）は不透明になる、という設計です。途中の値はブラウザが自動的に補間してくれるため、ふわっと現れる動きになります。

0%と100%だけでなく、途中の段階も指定できます。たとえば次のように書けば、上下に弾むような動きになります。

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

このように、進行度を細かく刻むほど複雑な動きを表現できます。とはいえ、何パーセントの時点でどんな値にすればよいかを頭の中だけで組み立てるのは大変です。動きを試しながら@keyframesのコードを書き出せるCSSキーフレームジェネレーターを使うと、視覚的に確認しながら設計図を作れて便利です。

animationプロパティの中身

@keyframesで設計図を作ったら、それを要素に適用し、再生方法を指定します。それを担うのがanimationプロパティ群です。よく使う五つを押さえておきましょう。

duration（再生時間）は、アニメーション全体を何秒で進めるかです。指定しないと0秒となり動きが見えないため、必ず設定します。timing-function（速度変化）は、最初はゆっくり・後半は速く、といった速度のカーブを決めます。easeやlinearといったキーワードのほか、cubic-bezier()で自由なカーブも作れます。このカーブの当たりを付けるには、曲線を視覚的に調整できるcubic-bezierジェネレーターが役立ちます。

delay（遅延）は再生開始までの待ち時間で、複数の要素を時間差で動かす「ずらし演出」に使えます。iteration-count（繰り返し回数）は再生回数で、infiniteを指定すると無限ループになり、ローディングスピナーなどに使います。direction（向き）は、alternateを指定すると往復再生になり、行って戻ってを繰り返す自然な動きが作れます。

これらはanimation: fade-in 0.6s ease 0.2s 1 normal;のように一行のショートハンドでまとめて書くこともできます。記述順に迷ったら、まずは個別プロパティで書いて慣れるのがおすすめです。

transitionとの違い

CSSで動きを付ける方法には、animationのほかにtransitionがあります。両者は似ていますが、得意分野がはっきり分かれます。

transitionは、「ある状態から別の状態へ変わるとき」だけ動きを補間します。たとえばボタンに:hoverで色を指定しておけば、マウスを乗せた瞬間だけ滑らかに色が変わります。始点と終点の二点間をつなぐシンプルな用途に最適です。

一方のanimationは、状態変化のきっかけがなくても、要素に適用するだけで自動的に再生が始まります。@keyframesで途中の段階を細かく指定でき、無限ループや往復再生もできるため、ローディング表示や注目させたい要素の継続的な動きなど、複雑で自動的な動きに向いています。単純なホバー演出ならtransition、複雑・自動・反復ならanimationと覚えておくとよいでしょう。

よくある動き：フェード・スライド・回転

実務で繰り返し登場する定番の動きを、考え方とともに紹介します。いずれも@keyframesとanimationの組み合わせで作れます。

1. フェード（ふわっと表示）

透明度（opacity）を0から1へ変化させるだけで、要素がふわっと現れます。逆に1から0にすればフェードアウトです。最もシンプルで使用頻度が高い動きで、ページ読み込み時の演出によく使われます。

2. スライド（滑り込み）

transform: translateX()やtranslateY()で位置をずらした状態から、元の位置（0）へ戻すと、横や縦から滑り込んでくる動きになります。フェードと組み合わせて「下からふわっと上がりながら表示」とすると、上質な印象になります。

3. 回転（くるくる）

transform: rotate(0deg)からrotate(360deg)へ変化させ、iteration-count: infiniteとtiming-function: linearを組み合わせると、一定速度で回り続けるローディングスピナーになります。linearを使うのは、回転は速度が一定のほうが自然に見えるためです。

これらの動きの@keyframesは、手書きでも作れますが、プレビューしながらコードを生成できるCSSキーフレームジェネレーターを使えば、調整と確認を素早く繰り返せます。速度のカーブにこだわりたいときは、あわせてcubic-bezierジェネレーターでtiming-functionを詰めると、動きの印象がぐっと洗練されます。

パフォーマンスの注意点

アニメーションは「滑らかに見えること」が命です。カクついて見えると、かえって安っぽい印象を与えてしまいます。滑らかさを保つうえで、もっとも大切なのがどのプロパティをアニメーションさせるかです。

• transformとopacityを優先する：位置の移動や拡大縮小、回転はtransformで、表示・非表示はopacityで行うのが基本です。これらはブラウザがGPUで効率よく処理でき、滑らかに動きやすい性質があります。
• width・height・top・leftの連続変化は避ける：これらでサイズや位置を毎フレーム変えると、レイアウトの再計算（リフロー）が頻発し、カクつきの原因になります。位置を動かすならtop/leftではなくtransform: translate()を使いましょう。
• 同時に動かす要素を増やしすぎない：大量の要素を一斉にアニメーションさせると、低性能な端末では処理が追いつきません。数を絞るか、時間差で動かす工夫が有効です。

また、アクセシビリティの観点も忘れないでください。動きに敏感なユーザーのために、OSの「視差効果を減らす」設定を尊重する@media (prefers-reduced-motion: reduce)を用意し、その場合はアニメーションを控えめにする配慮があると親切です。

CSSアニメーションは、@keyframesで動きの設計図を作り、animationプロパティで再生方法を指定する、という二段構えで考えると見通しよく扱えます。まずはCSSキーフレームジェネレーターでフェードやスライドを実際に作って動かし、速度のカーブはcubic-bezierジェネレーターで微調整してみてください。手を動かして目で確かめることが、上達への一番の近道です。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの対応状況は更新されることがあるため、実装にあたっては最新の公式ドキュメントや各ブラウザの対応情報も確認したうえでご利用ください。