TRANSLATE ONLY
Rigid Motion
translate
START
TARGET
RIGID
CSS MOTION STUDY
Squash & Stretch
同じtranslateでも、形が変わると動きの手触りが変わります。
01
LIVE COMPARISON
同じ軌道、違う手触り
SAME ARRIVAL TIMING
TRANSLATE + SHAPE
Squash & Stretch
translate + scale
START
TARGET
ALIVE
scale: 1
scale: 1.11 .89
scale: .76 1.24
scale: 1.07 .95
scale: 1
02
SEPARATE RESPONSIBILITIES
動きを3つに分ける
translate要素がどこへ移動するか
scale速度や衝突で縦横比を変える
border-radius変形した瞬間の輪郭を整える
移動と変形を別々のキーフレームにすると、それぞれのタイミングを独立して調整できます。
CSS RECIPE
役割ごとのコード