Frontend Academy · レッスン

@keyframes アニメーション

@keyframes で複数ステップのアニメーションを定義し、animation の短縮構文で適用し、反復・方向・fill-mode を制御します。

「@keyframes アニメーション」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

トランジションとアニメーションの比較

トランジションは、変更をきっかけに2つの状態の間をアニメーションさせます。@keyframes アニメーションは自動的に実行でき、ループ、逆再生、無限再生が可能で、複数の中間ステップも定義できます。開始のきっかけは必要ありません。

@keyframes の定義

@keyframes を使ってアニメーションのシーケンスを宣言します。パーセンテージ（0%、50%、100%）または from と to のキーワードを使って状態を定義します。

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

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

animation のショートハンド

animation: name duration timing-function delay iteration-count direction fill-mode。このショートハンドを使って、要素にアニメーションを適用します。

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

アニメーションを実行する回数を設定します。infinite は永遠にループします。数値を指定すると、その回数だけ正確に実行します。

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal（デフォルト）: 毎回順方向に再生します。reverse: 逆方向に再生します。alternate: 順方向の後に逆方向へ再生します。alternate-reverse もあります。alternate はピンポン効果に適しています。

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

アニメーションの前後における要素の状態を制御します。forwards: 要素を最後のキーフレームの状態に保ちます。backwards: 遅延中にfromの状態を適用します。both: 両方を適用します。

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

animation-play-state: paused | running を切り替えることで、JavaScriptからアニメーションを一時停止・再開できます。

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

複数のアニメーション

複数のアニメーションをカンマで区切ることで、1つの要素に適用できます。それぞれのアニメーションは独立して実行されます。

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

animation-delay による段階的なアニメーション

項目ごとに遅延を増やすことで、リスト項目の開始をずらせます。CSSカスタムプロパティを使うと、JavaScriptで簡単に実現できます。

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — ブラウザーへのヒント

will-change: transform は、そのプロパティがアニメーションすることをブラウザーに伝えます。これにより、あらかじめ要素を専用のコンポジター・レイヤーへ昇格させられます。ただし、使いすぎるとコンポジター・レイヤーが増え、GPUメモリを無駄に消費するため、慎重に使用してください。

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

実践: スケルトンローディング画面

スケルトン画面では、コンテンツの読み込み中であることを示すためにシマーアニメーションを使用します。グラデーションがプレースホルダーの形状の上を滑るように移動します。

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

クイックチェック

アニメーション終了後も要素を最後のキーフレームの状態に保つ animation-fill-mode の値はどれですか。

まとめ: @keyframes アニメーション

from/to またはパーセンテージを使い、@keyframes で定義します。animation のショートハンドで適用します。ループには iteration-count を使用します。ピンポン再生には alternate を指定します。最終状態を保持するには fill-mode: forwards を使用します。animation-delay とCSS変数で開始をずらします。滑らかなコンポジットアニメーションには、transform と opacity のキーフレームを使用します。

よくある質問

「@keyframes アニメーション」レッスンは無料ですか？

はい。「@keyframes アニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「@keyframes アニメーション」で何を学びますか？

@keyframes で複数ステップのアニメーションを定義し、animation の短縮構文で適用し、反復・方向・fill-mode を制御します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「@keyframes アニメーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る