Animation Principles

Purposeful

Every animation should serve a purpose—guiding attention, providing feedback, or indicating state changes.

Performant

Keep animations under 300ms for UI interactions. Use transform and opacity for best performance.

Subtle

Animations should enhance, not distract. Prefer subtle, natural-feeling movements over dramatic effects.

Animation Library

Fade In

Click Replay to see animation

Gentle opacity transition from 0 to 1 with slight upward movement

Class Name: animate-fade-in
Duration: 0.8s
Timing: ease-out

Usage Context

Page contentModal entryLoading states

Keyframes:

from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }

Scale In

Click Replay to see animation

Scale from 95% to 100% with opacity fade

Class Name: animate-scale-in
Duration: 0.3s
Timing: ease-out

Usage Context

ModalsDialogsPopovers

Keyframes:

from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }

Slide In Right

Click Replay to see animation

Slide in from right edge with opacity fade

Class Name: animate-slide-in-right
Duration: 0.3s
Timing: ease-out

Usage Context

Side panelsNotificationsDrawers

Keyframes:

from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }

Slide Out Right

Click Replay to see animation

Slide out to right edge with opacity fade

Class Name: animate-slide-out-right
Duration: 0.2s
Timing: ease-in

Usage Context

Dismissing panelsClosing drawers

Keyframes:

from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100%); }

Float Slow

Click Replay to see animation

Gentle floating motion with rotation (8s infinite loop)

Class Name: animate-float-slow
Duration: 8s infinite
Timing: ease-in-out

Usage Context

Background elementsDecorative objectsHero sections

Keyframes:

0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }

Float Delayed

Click Replay to see animation

Floating animation with 2s delay (6s infinite loop)

Class Name: animate-float-delayed
Duration: 6s infinite (2s delay)
Timing: ease-in-out

Usage Context

Secondary decorative elementsStaggered animations

Keyframes:

0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
50% { transform: translateY(-15px) rotate(120deg); opacity: 0.8; }

Float Gentle

Click Replay to see animation

Subtle floating with scale change (7s infinite loop, 4s delay)

Class Name: animate-float-gentle
Duration: 7s infinite (4s delay)
Timing: ease-in-out

Usage Context

Tertiary decorative elementsBackground accents

Keyframes:

0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
50% { transform: translateY(-10px) scale(1.1); opacity: 0.9; }

Pulse Glow

Click Replay to see animation

Pulsing glow effect with box-shadow (3s infinite loop)

Class Name: animate-pulse-glow
Duration: 3s infinite
Timing: ease-in-out

Usage Context

Accent elementsCall-to-action buttonsNotifications

Keyframes:

0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.2); }

Shimmer

Click Replay to see animation

Shimmer effect for loading states (2s infinite loop)

Class Name: animate-shimmer
Duration: 2s infinite
Timing: linear

Usage Context

Loading skeletonsPlaceholder content

Keyframes:

0% { background-position: -200% 0; }
100% { background-position: 200% 0; }

Timing Functions

Timing functions control the rate of change during animations, creating natural-feeling motion.

Linear

ease-linear

Continuous motion without acceleration

linear

Ease

ease

Default easing for most animations

cubic-bezier(0.25, 0.1, 0.25, 1)

Ease In

ease-in

Acceleration from rest (exits, dismissals)

cubic-bezier(0.4, 0, 1, 1)

Ease Out

ease-out

Deceleration to rest (entrances, reveals)

cubic-bezier(0, 0, 0.2, 1)

Ease In Out

ease-in-out

Smooth start and end (transformations)

cubic-bezier(0.4, 0, 0.2, 1)

Duration Tokens

Standard duration tokens for consistent animation timing across the application.

75ms

duration-75

Micro-interactions

100ms

duration-100

Instant feedback

150ms

duration-150

Quick transitions

200ms

duration-200

Standard transitions

300ms

duration-300

Medium transitions

500ms

duration-500

Longer animations

700ms

duration-700

Deliberate movements

1000ms

duration-1000

Dramatic effects

Code Examples

Basic Hover Transition

// Smooth hover effect with transition
<button className="bg-accent hover:bg-accent-hover text-white px-6 py-3
               rounded-lg transition-colors duration-200 ease-out">
  Hover Me
</button>

Modal Entry Animation

// Modal with scale-in animation
<div className="fixed inset-0 flex items-center justify-center
            bg-black/50 z-50 animate-fade-in">
  <div className="bg-surface-1 rounded-2xl shadow-2xl max-w-lg
              w-full mx-4 p-8 animate-scale-in">
    <h2 className="text-h2 text-foreground mb-4">
      Modal Title
    </h2>
    <p className="text-neutral-strong">
      Modal content
    </p>
  </div>
</div>

Combining Multiple Properties

// Card with multiple animated properties
<div className="bg-surface-1 border rounded-xl shadow hover:shadow-lg
            transform hover:-translate-y-1 transition-all
            duration-300 ease-out p-6">
  <h3 className="text-lg font-semibold text-foreground mb-2">
    Interactive Card
  </h3>
  <p className="text-neutral-strong">
    Hover to see combined shadow + transform animation
  </p>
</div>

Best Practices

Do This

✓Keep UI animations under 300ms
✓Use transform and opacity for best performance
✓Provide visual feedback for interactions
✓Use ease-out for entrances, ease-in for exits
✓Respect prefers-reduced-motion accessibility setting

Do not Do This

✗Avoid animations longer than 500ms for UI elements
✗Do not animate properties that cause layout recalculation
✗Never use animation just for decoration
✗Avoid overly dramatic or distracting animations
✗Do not ignore accessibility (motion sickness, distractions)