Easing assigner
A curve that reads snappy on a move reads sluggish on a fade. Give each property its own, then take the CSS.
A curve paces a change from start to finish. Steep is fast, flat is slow.
transform: translateX() Leaves at full speed and settles into place. This site's --ease-out, and the safest of the five on a move.
opacity Leaves at full speed and settles into place. This site's --ease-out, and the safest of the five on a move.
transform: scale() Leaves at full speed and settles into place. This site's --ease-out, and the safest of the five on a move.
background-color Leaves at full speed and settles into place. This site's --ease-out, and the safest of the five on a move.
Controls
Freezes all four at the same instant, at four different points of the same journey.
On, every panel changes together.
1600ms is for reading a curve, not for shipping.
Move and scale cross-fade in place instead of travelling.
motion.css