Transitions

Smooth transitions for interactive elements. Axiom provides composable transition classes and automatically respects prefers-reduced-motion for users who prefer minimal animation.

Speed Comparison

Combine any transition class with a speed modifier. Watch the bars animate to see the difference:

Use .transition-fast for micro-interactions. Use .transition-slow for deliberate animations like panels or modals.

Property Classes

Choose which properties to animate:

Speed Modifiers

Add a speed modifier to any transition class:

<!-- Examples -->
<button class="transition">Normal speed, common properties</button>
<button class="transition transition-fast">Fast, common properties</button>
<div class="transition-all transition-slow">Slow, all properties</div>
<div class="transition-opacity transition-fast">Fast opacity only</div>

Reduced Motion

Axiom automatically respects prefers-reduced-motion. When users have this preference enabled, all transition durations become 0ms. No extra classes or media queries needed in your HTML.

Config Variables

The transition system uses these CSS custom properties from config.css:

Override these in your own CSS to change timing globally. The ease-out curve feels natural for UI interactions because it starts fast (immediate response) and decelerates (smooth settle).

Easing Functions

Beyond the default ease-out, Axiom provides exotic easing curves using the CSS linear() function. These express physics that cubic-bezier cannot: elastic overshoot, bounce landing, and spring dynamics.

Compose easing classes with any .transition-* class. They override --transition-ease for that element.

<!-- Elastic button hover -->
<button class="transition-transform ease-elastic">Hover me</button>

<!-- Spring drawer -->
<div class="transition-all transition-slow ease-spring">Panel</div>

<!-- Use the variable directly in custom CSS -->
.my-element { transition: transform 500ms var(--ease-bounce); }