問題1: アニメーションが動かない

問題

@keyframesで定義したアニメーションが動作しません。

HTML

<div class="loading-spinner">
  <div class="spinner"></div>
</div>

CSS

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  /* animation プロパティを追加 */
}

実行結果

※ アニメーションが動作していません

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

@keyframesで定義したアニメーションを適用するには何が必要でしょうか？

要素にanimationプロパティを設定する必要があります。

animationプロパティには、名前、時間、タイミング関数などを指定します。

解答

クリックして解答を表示

問題の原因

@keyframesで定義したアニメーションを要素に適用するにはanimationプロパティが必要です。

修正方法

animationプロパティを追加

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

覚えておくポイント

  • @keyframesとanimationプロパティは必ずセット
  • アニメーション名は正確に一致させる
  • durationの指定は必須
  • infiniteで無限ループ