変身の呪い

ミッション：箱がひとりでに変身し続ける装置をつくろう！

コードを写そう

HTMLタブに下のコードを貼り付けてください。

html

<div id="box"></div>

CSSタブに下のコードを貼り付けてください。

css

#box {
  width: 100px;
  height: 100px;
  background: steelblue;
  animation: henshin 1s infinite alternate;
}

@keyframes henshin {
  from {
    background: steelblue;
    transform: scale(1);
  }
  to {
    background: tomato;
    transform: scale(1.5);
  }
}

ページを開いたとき、箱が青と赤の間で変身し続けることを確認してください。

コードを読み解こう

`@keyframes henshin`：アニメーションの「振り付け」を作る

css

@keyframes henshin {
  from {
    background: steelblue;
    transform: scale(1);
  }
  to {
    background: tomato;
    transform: scale(1.5);
  }
}

@keyframes henshin は「henshin という名前の振り付けを定義する」という意味です。

from：アニメーションが始まったときの見た目
to：アニメーションが終わったときの見た目

transform: scale(1.5) は「1.5倍のサイズに拡大する」という意味です。scale(1) は等倍（元のサイズ）です。

この定義だけでは何も動きません。振り付けを「作った」だけで、まだ誰にも「踊れ」と指示していない状態です。

`animation: henshin 1s infinite alternate`：箱に振り付けを割り当てる

css

#box {
  animation: henshin 1s infinite alternate;
}

「box に henshin という振り付けを踊らせる」という指示です。

単語	意味
`henshin`	使う振り付けの名前（`@keyframes` で定義した名前）
`1s`	1回のアニメーションにかかる時間（1秒）
`infinite`	無限に繰り返す
`alternate`	行きと帰りを交互に繰り返す

@keyframes と animation の対応関係：

css

@keyframes henshin { ... }  ← 「henshin」という振り付けを定義

animation: henshin 1s ...;  ← 「henshin」という振り付けを使う

名前が一致していることが大切です。

改造しよう

ミッション①：色を変えよう

from と to の中の background の値を変えると、変身前後の色が変わります。

変える場所はここです：

css

@keyframes henshin {
  from {
    background: steelblue;  ← ここを変える（変身前の色）
  }
  to {
    background: tomato;     ← ここを変える（変身後の色）
  }
}

例：purple（紫）、gold（金）、limegreen（黄緑）

ミッション②：速さを変えよう

animation: henshin 1s infinite alternate; の 1s の数字を変えると速さが変わります。

css

animation: henshin 1s infinite alternate;
                   ↑ ここを変える

0.3s にすると速くなります
3s にするとゆっくりになります

チェックしてみよう

[ ] ページを開いたとき、箱が自動で動いている
[ ] @keyframes で振り付けを定義している
[ ] animation プロパティで振り付けを割り当てている