The timing function is the "personality" of motion. ease starts and ends slow; linear is constant; cubic-bezier() defines a custom curve; steps() jumps in discrete frames (sprite animation). The right curve makes motion feel natural.
The timing function is the "personality" of motion. ease starts and ends slow; linear is constant; cubic-bezier() defines a custom curve; steps() jumps in discrete frames (sprite animation). The right curve makes motion feel natural.
<!doctype html><html><head><meta charset="utf-8">
<style>.b{width:40px;height:40px;background:#b388ff;margin:8px 0;transition:transform 1s}.lin{transition-timing-function:linear}.cb{transition-timing-function:cubic-bezier(.68,-0.55,.27,1.55)}body:hover .b{transform:translateX(200px)}</style></head><body style="background:#06040d;padding:20px"><div class="b lin"></div><div class="b"></div><div class="b cb"></div><p style="color:#8a82b0">hover anywhere</p></body></html>