The cheatsheet for choosing the right CSS easing functions

CSS easing functions control the timing of animations, making them feel smoother and more natural. Here's a simple guide to selecting the right one:

  • Enter/exit animations: Use ease-out to create a smooth deceleration as elements leave or appear on the screen. Example: A modal fading out or a dropdown menu sliding into view.
  • Position changes: For elements already on the screen and moving between positions, choose ease-in-out. It ensures smooth acceleration and deceleration. Example: A card rearranging itself in a grid.
  • Constant animations (e.g., marquee): Use linear for consistent, even motion without any variation in speed. Example: marquee.
  • Hover effects: Most hover animations work well with ease, creating subtle, natural transitions. Example: A button slightly enlarging on hover.

Recommendation:

Default to ease-out for most cases. Avoid using ease-in, as it can make animations feel abrupt and less polished.

This simple approach helps ensure your animations feel smooth and intuitive.