transition-easing-systems

name	transition-easing-systems
description	Use when defining motion easing curves. Linear feels mechanical; spring feels playful; ease-out feels professional.

Transition Easing Systems

Editorial brands: ease-out (start fast, end slow) for entrances; ease-in-out for transitions. Avoid linear, avoid bouncy spring.

Easing curve options

Easing	Feel	Use
linear	Mechanical	Loading bars, progress
ease-out	Settled	Entrances, hover (most common)
ease-in	Departure	Exits, dismissals
ease-in-out	Smooth	State transitions
spring (custom)	Playful	Confirmations, success
cubic-bezier(0.4, 0, 0.2, 1)	Material smooth	Modern UI

CSS easing

.entrance {
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.hover {
  transition: all 150ms ease-out;
}
.state-change {
  transition: all 300ms ease-in-out;
}
.spring {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

Duration discipline

• Hover: 100-200ms (snappy)
• Page transitions: 200-300ms
• Section reveals: 400-600ms
• Entrance animations: 600-1000ms (slower for impact)
• Avoid >1500ms (feels laggy)

Where this fits in the X3 empire

Easing system applied across CardPrepAI motion.