CSSアニメーション入門
ふわっと動くUIを作る

CSS の動きは2種類ある

CSS でアニメーションを作る方法は大きく2つ。 まずここをしっかり区別しておこう。

• transition（トランジション）
  ホバーなどをトリガーに「A の状態から B の状態」へなめらかに変化させる。 「ボタンにマウスを乗せたら色が変わる」みたいなやつ。
• animation（アニメーション）
  @keyframes を使って「ループし続ける動き」や「複雑な動き」を作る。 ローディングスピナーや、ページ読み込み時のふわっと登場演出など。

まず transition から始めよう

transition はシンプルで、一番使う場面も多い。 書き方を覚えれば今日からすぐ使える。

transition: プロパティ名  時間  イージング  遅延;

/* 例：全プロパティを0.3秒でeaseアニメーション */
transition: all 0.3s ease;

/* 例：背景色を0.4秒、transformを0.2秒 */
transition: background 0.4s ease, transform 0.2s ease;

ボタンに transition を付けるとこうなる。ホバーしてみて！

background: #7c3aed;
transition: background 0.3s ease,
            transform 0.2s ease,
            box-shadow 0.3s ease;

/* :hover 時 */
background: #6d28d9;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(124,58,237,0.3);

イージング（timing-function）って何？

動きの「加速感」のこと。同じ時間でも、イージングが変わると印象がガラッと変わる。 下のバーがそれぞれ違うイージングで動いているよ。

次は @keyframes animation

transition がトリガーありの「A→B」なら、 animation は「ひとりでに動き続ける」演出に使う。

/* ① アニメーションの「型」を定義 */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ② 要素に適用 */
.card {
  animation: fadeInUp 0.6s ease-out;
}

よく使うアニメーションパターンを3つ見てみよう。

animation プロパティの全オプション

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

/* カードに適用。3枚それぞれ少しずつ遅らせる */
.card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0; /* 初期状態を非表示に */
}
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }