transitionとtransform、2つの道具がそろいました。今回は組み合わせて、Webでよく見るカードが持ち上がる演出を作ってみます。
カードが持ち上がる演出
カーソルを乗せてみてください。
種明かしは単純です。:hoverのときtransform: translateY(-6px)で少し上へ、box-shadowを濃く・広くしているだけ。この2つをtransitionでなめらかにしています。
押しごたえを出す：active も使う
:hover（乗っている間）に加えて、:active（押している間）も指定すると、クリックした瞬間の押しごたえが出ます。
:activeは、マウスのボタンを押し下げている間だけ効く状態。指を離すと:hover（乗っているだけの状態）に戻ります。
このレッスンのまとめ
transitionはカンマ区切りで複数プロパティを同時になめらかにできる- 持ち上げ演出は
transform: translateY()＋box-shadowの組み合わせが定番 :activeで押した瞬間の反応も作れる- 動きは控えめが上品