【第14回】CSSアニメーションの基本｜transitionと@keyframesで動きをつけよう

【第14回】CSSでアニメーションを作ってみよう｜CSS初心者ノート

ブログの進め！

2025.11.262025.12.20

記事内に広告が含まれています。

みかおば

📘 CSS初心者のみかおばです！
今回は、CSSで「動き」をつけるための transition と @keyframes を使ってみます💫
ボタンがふわっと変化したり、要素がスライドしたり──
CSSだけで簡単にアニメーションが作れるようになります✨

🎞 transition とは？
💫 @keyframes とは？
🪄 ホバーでふわっと変化させる（transition）
🎬 繰り返し動くアニメーション（@keyframes）
💻 実際のコード例（セット）
👀 実際の表示結果（文章）
⚠️ よくあるミスと注意点
✅ ポイントまとめ
📌 次回予告
🔖 この回で出てきたプロパティ

🎞 transition とは？

ある状態から別の状態に変化するとき、その変化を「なめらかに」するプロパティです。

transition でできること例

背景色がフワッと変わる
ボタンが少し大きくなる
透明度がゆっくり変化する

transition は
「どのプロパティの変化を、どのくらいの時間で行うか」を指定します。

.button {
  background-color: #7aa6ff;
  padding: 12px 20px;
  color: white;
  border-radius: 8px;
  transition: 0.3s;  /* ← 0.3秒かけて変化 */
}

.button:hover {
  background-color: #ff6699;
  transform: scale(1.05);
}

👉 ホバーすると、色と大きさがふわっと変わります✨

💫 @keyframes とは？

一定の動きを繰り返すアニメーションを作る仕組みです。

@keyframes の 0%・50%・100% は
**「アニメーションの進行度（タイミング）」**を意味します。

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

.icon {
  display: inline-block;
  animation: updown 2s infinite;
}

👉 アイコンがふわふわ上下に揺れるアニメーションになります⤴️⤵️

🪄 ホバーでふわっと変化させる（transition）

<a href="#" class="button">ボタン</a>

.button {
  display: inline-block;
  background-color: #7aa6ff;
  padding: 12px 20px;
  color: white;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: #ff6699;
  transform: scale(1.05);
}

🎬 繰り返し動くアニメーション（@keyframes）

<p class="notice">お知らせが届いています🔔</p>

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

.notice {
  animation: blink 1.5s infinite;
}

👉 ゆっくり点滅します。

💻 実際のコード例（セット）

<h2 class="title icon">CSSアニメーションの例</h2>
<a href="#" class="button">ホバーボタン</a>
<p class="notice">点滅するテキストです</p>

/* 上下にゆれる */
@keyframes updown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.title.icon {
  display: inline-block;
  animation: updown 2.5s infinite;
  color: #007bff;
}

/* ホバーボタン */
.button {
  display: inline-block;
  background-color: #7aa6ff;
  padding: 12px 20px;
  color: white;
  border-radius: 8px;
  transition: background-color .3s, transform .3s;
}

.button:hover {
  background-color: #ff6699;
  transform: scale(1.05);
}

/* 点滅 */
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

.notice {
  animation: blink 1.5s infinite;
}