CORE UTILITY FAMILY

Transitions and animations

Control transition properties, discrete behavior, duration, delay, easing, starting styles, reduced-motion conditions, and CSS keyframe animations.

completeTarget v0.39 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Transition only properties that need motion, prefer short shared timings, use starting styles for entry transitions, and always define a reduced-motion outcome for nonessential animation.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-transition

transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --co-gradient-from, --co-gradient-via, --co-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-duration: var(--co-default-transition-duration); transition-timing-function: var(--co-default-transition-timing-function);

co-transition-discretetransition-behavior: allow-discrete;

co-transition-[width,opacity]transition-property: width,opacity;

co-duration-300transition-duration: 300ms;

co-delay-75transition-delay: 75ms;

co-ease-outtransition-timing-function: var(--co-ease-out);

co-animate-spinanimation: var(--co-animate-spin); @keyframes co-spin{to{transform:rotate(360deg);}}

motion-reduce:co-animate-noneanimation: none;

starting:co-opacity-0opacity: 0;

INTERACTIVE EXAMPLE · TRANSITION PROPERTY

Animate only the properties that change

Hover the control to preview a composed transition. Prefer a focused property group such as colors, opacity, shadow, or transform instead of transitioning everything.

component.coord

<button class="co-transition co-duration-300 co-ease-out hover:-co-translate-y-1 hover:co-shadow-lg">
  Hover me
</button>

<div class="co-transition-[width,opacity]">Custom property list</div>

INTERACTIVE EXAMPLE · DURATION & DELAY

Coordinate timing deliberately

Hover the preview to compare durations. Delay postpones the start, while duration controls how long the property takes to reach its destination.

150 MS

300 MS · 75 MS DELAY

700 MS

HOVER ANYWHERE IN THIS PREVIEW

component.coord

<div class="co-transition-transform co-duration-150">Fast</div>
<div class="co-transition-transform co-duration-300 co-delay-75">Standard</div>
<div class="co-transition-transform co-duration-700">Slow</div>

INTERACTIVE EXAMPLE · EASING

Shape acceleration and deceleration

Hover the tracks to compare identical durations with different timing curves. Ease-out feels responsive for elements entering or reacting to input.

LINEAR

EASE IN

EASE OUT

EASE IN OUT

component.coord

<div class="co-transition-transform co-duration-700 co-ease-linear">Linear</div>
<div class="co-transition-transform co-duration-700 co-ease-in">Ease in</div>
<div class="co-transition-transform co-duration-700 co-ease-out">Ease out</div>
<div class="co-transition-transform co-duration-700 co-ease-in-out">Ease in out</div>

INTERACTIVE EXAMPLE · STARTING STYLE

Transition an element when it first appears

Open the disclosure to replay its entry. The starting variant emits @starting-style, while transition-discrete allows properties such as display to participate.

TOGGLE ENTRY PREVIEW

Content enters from its declared starting style.

component.coord

<div class="co-transition co-transition-discrete co-duration-300 starting:co-opacity-0 starting:-co-translate-y-2">
  Newly mounted content
</div>

VISUAL EXAMPLE · ANIMATION PRESETS

Use namespaced keyframes for common feedback

Spin, ping, pulse, and bounce ship as configurable presets. The compiler emits each required keyframe once, even when the utility appears many times.

spin

ping

pulse

bounce

component.coord

<span class="co-animate-spin">Loading</span>
<span class="co-animate-ping">Live</span>
<span class="co-animate-pulse">Syncing</span>
<span class="co-animate-bounce">Scroll</span>

ACCESSIBILITY EXAMPLE · REDUCED MOTION

Respect the user's motion preference

Use motion-safe for decorative movement and motion-reduce to remove or simplify animation. The previews on this page also stop automatically when reduced motion is enabled at operating-system level.

MOTION-AWARE LOADERAnimated normally · static under prefers-reduced-motion

component.coord

<div class="motion-safe:co-animate-spin motion-reduce:co-animate-none">
  Accessible loader
</div>

<button class="motion-safe:co-transition-transform motion-safe:hover:co-scale-105">
  Continue
</button>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-transition co-transition-discrete co-transition-[width,opacity] co-duration-300 co-delay-75 co-ease-out co-animate-spin motion-reduce:co-animate-none starting:co-opacity-0">
  Your content
</div>

HOW IT WORKS

Core concepts

01
The default transition includes colors, gradients, opacity, shadows, modern transform properties, filters, discrete visibility properties, and pointer events.
02
Transition properties accept named groups, custom properties, and safe arbitrary property lists.
03
Duration and delay numeric values are interpreted as milliseconds and also accept comma-separated arbitrary timing lists.
04
Easing uses CSS-first --co-ease-* tokens, built-in linear/in/out/in-out curves, custom properties, or arbitrary timing functions.
05
Spin, ping, pulse, and bounce presets emit deduplicated namespaced keyframes and remain configurable through --co-animate-* tokens.
06
The starting variant emits @starting-style while transition-discrete enables transitions for display and other discrete properties.
07
motion-safe and motion-reduce variants allow the generated interface to honor the user's reduced-motion preference.

CSS PROPERTIES

What this family controls

transition-propertytransition-behaviortransition-durationtransition-delaytransition-timing-functionanimation@keyframes@starting-style

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-transition md:co-transition-discrete hover:co-transition">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-transition-*
co-[content-visibility:auto]

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Animation presets run indefinitely, so motion-reduce:co-animate-none should be included when motion is not essential.
Custom animation tokens reference application-owned keyframes; define those @keyframes in authored CSS.
Transitioning all properties can animate unintended changes and should be reserved for tightly controlled components.

Previous← Transforms and perspective NextSVG →