レッスンに戻る

飛行機をアニメーションする (CSS)

重要性: 5

下の図のようなアニメーションを表示してください(飛行機をクリックしてください)。:

  • 写真はクリックで 40x24px から 400x240px まで大きくなります(10倍)
  • アニメーションは 3秒です
  • 最後に “Done!” を出力します
  • アニメーション処理中にも飛行機がクリックがされる可能性がありますが、それらは何も “壊すべきではありません”。

タスクのためのサンドボックスを開く

widthheight 両方をアニメーションする CSS です:

/* 元の class */

#flyjet {
  transition: all 3s;
}

/* JS で .growing を追加*/
#flyjet.growing {
  width: 400px;
  height: 240px;
}

transitionend は 2回トリガすることに注意してください – すべてのプロパティに対して1度トリガします。したがって、追加のチェックをしない場合、メッセージは2度表示されます。

サンドボックスで解答を開く