ここまでで、HTML・CSS・JavaScriptを一通り学んできました。今回からは、その力を使ってページに「動き」をつけていきます。
なぜ動きが要るの？
ボタンにカーソルを乗せたときに、色がパッと切り替わるのと、ふわっと変わるのとでは、受け取る印象がずいぶん違います。動きがあると——
- 気づきやすい（ここが押せる、ここが変わった、が伝わる）
- 気持ちいい（操作に対して画面が応えてくれている感じがする）
- わかりやすい（メニューが「すっ」と開くと、どこから出てきたか目で追える）
下のボタンにカーソルを乗せてみてください。実際に動きます。
これが、これから学んでいくtransition（なめらかに変化させる仕組み）です。
このトラックで学ぶこと
| 学ぶこと | どういうこと |
|---|---|
transition | 変化をなめらかにする基本 |
transform | 拡大・回転・移動で見た目を変える |
@keyframes | 決まった動きを繰り返す・連続させる |
| JSとの組み合わせ | クリックなどのタイミングで動きを始める |
このレッスンのまとめ
- アニメーション＝見た目の変化を時間をかけて見せること
- 気づきやすさ・気持ちよさ・わかりやすさにつながる
- 使うのは学んできたCSS＋新しい仕組み（
transition・@keyframesなど）