🎬 Animation Easing Types Guide

📚 Understanding Animation Easing & Properties

Easing functions control the rate of change of an animation over time. They make animations feel more natural and engaging by mimicking real-world physics.


📈 Easing Types

  • Linear: Constant speed throughout
  • Ease-in: Starts slow, accelerates
  • Ease-out: Starts fast, decelerates
  • Ease-in-out: Slow start and end, fast middle
  • Cubic-bezier: Custom curves for precise control

🔄 Animation Direction

  • Normal: Animation runs forward
  • Reverse: Animation runs backward
  • Alternate: Forward, then backward
  • Alternate-reverse: Backward, then forward

🔢 Iterations & Fill Mode

  • Iterations: How many times to repeat
  • None: No styling outside animation
  • Forwards: Keep final state
  • Backwards: Apply initial state immediately
  • Both: Apply both forwards and backwards

🎯 Fill Mode Visual Demo

Fill modes control what happens before and after the animation runs:

🔴 None (Default)

Before: Original position
During: Animates normally
After: Returns to original
Use case: Hover effects, temporary highlights

🟢 Forwards

Before: Original position
During: Animates normally
After: Stays at final position
Use case: Slide-in menus, expanding cards

🟡 Backwards

Before: Starts at final position
During: Animates normally
After: Returns to original
Use case: Pre-loading states, delayed reveals

🔵 Both

Before: Starts at final position
During: Animates normally
After: Stays at final position
Use case: Complex sequences, smooth transitions

💡 Quick Tips for Fill Modes:

  • None: Perfect for temporary effects (hover, pulse, shake)
  • Forwards: Great for reveal animations (slide-in, fade-in)
  • Backwards: Useful with delays to show end state early
  • Both: Best for complex multi-step animations