飛行機をアニメーションする (CSS)
重要性: 5
下の図のようなアニメーションを表示してください(飛行機をクリックしてください)。:
- 写真はクリックで
40x24pxから400x240pxまで大きくなります(10倍) - アニメーションは 3秒です
- 最後に “Done!” を出力します
- アニメーション処理中にも飛行機がクリックがされる可能性がありますが、それらは何も “壊すべきではありません”。
width と height 両方をアニメーションする CSS です:
/* 元の class */
#flyjet{
transition: all 3s;
}
/* JS で .growing を追加*/
#flyjet.growing{
width: 400px;
height: 240px;
}transitionend は 2回トリガすることに注意してください – すべてのプロパティに対して1度トリガします。したがって、追加のチェックをしない場合、メッセージは2度表示されます。