Movement Character

1. Cubic-Bezier

Standard ease, ease-in-out are just templates. You can create your own speed curve:

transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Such a curve creates a " bouncing " effect (backwards/forwards overshoot).

2. steps() — Frame-by-Frame Animation

Perfect for sprites or " typewriter " effect.

transition-timing-function: steps(5); /* Movement in 5 sharp steps */