呪いを外から掛ける

ミッション：ボタンを押したときだけ、箱がアニメーションし始める装置をつくろう！

コードを写そう

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

html

<button id="castBtn">呪いをかけろ</button>
<div id="box"></div>

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

css

#box {
  width: 100px;
  height: 100px;
  background: steelblue;
  margin-top: 16px;
}

.animated {
  animation: henshin 1s infinite alternate;
}

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

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

const btn = document.querySelector('#castBtn');
const box = document.querySelector('#box');

btn.addEventListener('click', function() {
  box.classList.add('animated');
});

最初は箱が動かず、ボタンを押したときだけアニメーションが始まることを確認してください。

コードを読み解こう

アニメーションをCSSクラスに分ける

ここでは animation を .animated というクラスに書いています。

css

/* #box に直接書いた → ページを開いたら即動く */
#box {
  animation: henshin 1s infinite alternate;
}

/* .animated クラスに書いた → クラスが付いたら動く */
.animated {
  animation: henshin 1s infinite alternate;
}

最初の #box にはこのクラスが付いていないので、何も動きません。

`classList.add('animated')`：クラスという「服」を着せる

box.classList.add('animated');

「box に animated というクラスを付ける」という命令です。クラスが付いた瞬間に animation が適用されて、箱が動き始めます。

命令	動き
`classList.toggle('animated')`	付いていたら外す、外れていたら付ける
`classList.add('animated')`	付けるだけ（外さない）
`classList.remove('animated')`	外すだけ（付けない）

改造しよう

ミッション：「呪いを解く」ボタンも追加しよう

呪いを解くボタンを押すと、アニメーションが止まるようにしましょう。

ステップ1：HTMLにボタンを追加する