コース

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