CSS @keyframesとanimationの使い方｜フェードイン・回転の作り方

CSS @keyframesとanimationの使い方とは

CSSアニメーションは、@keyframes で「動きの設計図」を作り、animation プロパティで要素に割り当てる仕組みです。CSS transition が「状態Aから状態B」の2点間なのに対し、@keyframes では途中の地点も自由に指定でき、無限に繰り返すこともできます。MDNでは、2015年9月から主要ブラウザで使える Baseline の機能とされています。

基本（構文・仕組み）

まず @keyframes に名前を付けて、各地点（from / to、または0〜100%）のスタイルを書きます。

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

次に、要素へ animation で割り当てます。

.card { animation: fade-up .6s ease-out both; }

主な個別プロパティは次のとおりです。

プロパティ 役割 例
animation-name @keyframes の名前 fade-up
animation-duration 1回にかける時間 .6s
animation-timing-function 速度の変化 ease-out
animation-delay 開始までの待ち時間 .15s
animation-iteration-count 繰り返し回数 infinite
animation-fill-mode 前後のスタイルを保持するか both
animation-direction 往復など再生の向き alternate

MDNによると、keyframe 内の !important は無視されます。また、補間できないプロパティも無視されます。

サンプルコード（実行結果つき）

フェードイン、回転するスピナー、拍動するドットの3つを1ページにまとめた例です。

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.card { animation: fade-up .6s ease-out both; }
.card:nth-child(2) { animation-delay: .15s; }
.spinner {
  width: 32px; height: 32px;
  border: 4px solid #cbd5e1; border-top-color: #2563eb; border-radius: 50%;
  animation: spin 1s linear infinite;
}
.dot { width: 20px; height: 20px; border-radius: 50%; background: #e11d48;
  animation: pulse 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .card, .spinner, .dot { animation: none; }
}

both を付けると、遅延中は最初の状態（opacity:0）を保ち、終了後は最後の状態を保ちます。付けないと、遅延中に一瞬完成形が見える「ちらつき」が起きることがあります。

動作確認（検証環境と結果）

  • 環境: Windows 11、Microsoft Edge 154（Chromium系、headless）。ログは C:Tempks2techtestscss-keyframes-animation.md。
  • 実行: render.ps1 で描画し、document.getAnimations() で割り当てを確認しました。
  • 結果: 4本のアニメーションが生成され、fade-up は duration=600ms・iterations=1・fill=both、2枚目の delay=150ms、spin と pulse は iterations=Infinity でした。fade-up を finish() した後は、1枚目の opacity=1、transform は matrix(1, 0, 0, 1, 0, 0) でした。
  • 注意: headless の仮想時間では実時間のアニメーションが進まないため、動きの滑らかさは目視していません。prefers-reduced-motion: reduce の無効化も、OS設定を切り替えての確認はしていません（未検証）。

CSS @keyframesとanimationの使い方の注意点

  • 常時動く無限アニメーションは、読み取りの妨げになります。WCAG 2.2.2では、自動で始まり5秒を超えて続く動くコンテンツに、一時停止・停止・非表示の手段を求めています（動きが活動に不可欠な場合などは例外）。
  • アニメーションさせるのは、transform と opacity を優先します。
  • 同名の @keyframes が複数ある場合は、最後のものが使われます。名前の衝突に注意してください。
  • スクロール連動の animation-timeline は比較的新しい機能です。使う前に対応状況を確認してください。

CSS @keyframesとanimationの使い方でよくあるミス

  • animation-duration を書かず、0秒のまま動かない。
  • 終了後に元の位置へ戻る（forwards や both を忘れる）。
  • transform を from と to で異なる関数の並びにして、期待どおりに補間されない。
  • prefers-reduced-motion を考慮せず、前庭障害のある利用者に負担をかける。

ブラウザ対応・バージョン

基本の @keyframes と animation は、MDNの Baseline 表記で2015年9月から広く使えます。新しいプロパティは、MDNの互換性表で確認してください。古いコードに見られる -webkit- 付きの記述は、現在は不要になっています（{{css-vendor_prefix}}参照）。

CSS @keyframesとanimationの使い方のチェックリスト

  • @keyframes の名前と animation-name が一致しているか。
  • animation-fill-mode を目的に合わせて指定したか。
  • 無限アニメーションに、停止手段や prefers-reduced-motion の対応があるか。
  • 動かすプロパティは transform / opacity か。

CSS @keyframesとanimationの使い方のFAQ（よくある質問）

Q. JavaScriptでアニメーションを制御できますか？
A. 可能です。element.getAnimations() や Web Animations API で、再生・一時停止・完了を制御できます。

Q. 1つの要素に複数のアニメーションを付けられますか？
A. カンマ区切りで animation: fade-up .6s both, pulse 1s infinite; のように書けます。同じプロパティを動かすものを重ねると、後ろのものが優先されます。

Q. 一時停止はどう書きますか？
A. animation-play-state: paused; を使います。ホバーで止める用途などに便利です。

筆者の見解（CSS @keyframesとanimationの使い方）

私見では、CSSアニメーションは「目的がある動き」に限るのが良いと考えます。読み込み完了の通知や、注意を引く最小限の拍動など、意味を持たせた使い方であれば効果的です。一方で、装飾だけで常時動かし続けるのは避けるべきでしょう。無効化を最初から用意するのが基本姿勢です。

CSS @keyframesとanimationの使い方の関連項目

出典（一次情報）

タイトルとURLをコピーしました