ここまでで、HTML・CSS・JavaScriptを一通り学んできました。今回からは、その力を使ってページに「動き」をつけていきます。
なぜ動きが要るの？
ボタンにカーソルを乗せたときに、色がパッと切り替わるのと、ふわっと変わるのとでは、受け取る印象がずいぶん違います。動きがあると——
- 気づきやすい（ここが押せる、ここが変わった、が伝わる）
- 気持ちいい（操作に対して画面が応えてくれている感じがする）
- わかりやすい（メニューが「すっ」と開くと、どこから出てきたか目で追える）
下のボタンにカーソルを乗せてみてください。実際に動きます。
これが、これから学んでいくtransition（なめらかに変化させる仕組み）です。
身の回りの「動き」を探してみよう
Webアニメーションは、じつは毎日目にしています。たとえば——
- いいねボタンを押すと、ハートがぽんっと弾む
- 読み込み中に、くるくる回るマークが出る
- スクロールすると、写真がふわっと下から現れる
- メニューボタンを押すと、一覧がすっと開く
どれも「見た目の変化を時間をかけて見せている」だけ。そして全部、このコースで作り方を学びます。よく行くサイトやアプリで「どこが動いているか」を探してみると、動きの引き出しがどんどん増えていきます。
GIFや動画と何が違うの？
「動くもの」なら、GIF画像や動画を貼る方法もあります。でもCSSアニメーションには、はっきりした強みがあります。
| GIF・動画 | CSSアニメーション | |
|---|---|---|
| 重さ | ファイルが重くなりがち | とても軽い（コードだけ） |
| あとから調整 | 作り直しが必要 | コードを1行直すだけ |
| 画面サイズ | 拡大するとぼやける | どんな大きさでもくっきり |
| きっかけに反応 | できない（再生するだけ） | ホバーやクリックに反応できる |
「ボタンにカーソルが乗ったら動く」のような利用者の操作に応える動きは、CSSアニメーションにしか作れません。
このトラックで学ぶこと
| 学ぶこと | どういうこと |
|---|---|
transition | 変化をなめらかにする基本 |
transform | 拡大・回転・移動で見た目を変える |
@keyframes | 決まった動きを繰り返す・連続させる |
| JSとの組み合わせ | クリックなどのタイミングで動きを始める |
最後に、動きが苦手な人への寄りそい方（動きをひかえめにする設定への対応）まで学びます。動きを「作れる」だけでなく「気持ちよく届けられる」ところまでがこのコースのゴールです。
このレッスンのまとめ
- アニメーション＝見た目の変化を時間をかけて見せること
- 気づきやすさ・気持ちよさ・わかりやすさにつながる
- 使うのは学んできたCSS＋新しい仕組み（
transition・@keyframesなど）