コース

Webアニメーション

transition・transform・keyframesで、ページの部品をなめらかに動かします。

はじめよう

Webアニメーションって何？

Webアニメーション・レッスン 1 / 8

はじめの一歩全2レッスン

  1. 01Webアニメーションって何？transitiontransform@keyframes
  2. 02なめらかに変化させるtransitiontransitiontransition-durationtransition-delay

動かし方の基本全2レッスン

  1. 03拡大・回転・移動で見た目を変えるtransformtransformscale()rotate()translate()transform-origin
  2. 04組み合わせて作るホバー演出:hover:activetransitiontransformbox-shadow

ループする動き全1レッスン

  1. 05繰り返す動きを作る@keyframes@keyframesanimationanimation-delay

発展全3レッスン

  1. 06クリックで動きを始める（JSとの組み合わせ）classList.toggle()addEventListener()max-height
  2. 07スクロールで動きを始めるIntersectionObserverclassList.add()querySelectorAll()transition-delay
  3. 08動きをひかえめにする設定に寄りそうprefers-reduced-motion@media

このコースについて

動きは飾りではなく案内です。押せたことが分かる、要素が現れたことに気づける——うまく使うと、言葉で説明しなくても操作が伝わります。逆にやりすぎると読みにくくなるので、「効く量」の目安も一緒に扱います。

transitionでなめらかに変える、transformで動かす・回す・拡大する、keyframesで複雑な動きを組む、という3つを順に扱います。ホバーの演出やスクロールに連動した表示といった、実際によく使う形をそのまま作ります。

動きが苦手な人のための設定であるprefers-reduced-motionにも触れます。前提はCSSコースです。テーマ別コースなので、きほんを終えたあとは好きな順で読めます。