Composables

Transitions Utilities

Create transition utilities for smooth state changes with full type safety. Control which properties animate, timing, easing, and delays.

Overview

Transition utilities help you create smooth visual state changes. These utilities control which properties animate, how long transitions take, what easing functions to use, and how long to delay before starting.

Why Use Transition Utilities?

Transition utilities help you:

Create smooth interactions: Add polish with animated hover and focus states
Control timing: Define consistent transition durations across your application
Apply easing functions: Use predefined timing functions for natural motion
Improve user experience: Guide attention with purposeful state changes

`useTransitionPropertyUtility`

The useTransitionPropertyUtility() function creates utility classes for specifying which properties should animate.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useTransitionPropertyUtility } from "@styleframe/theme";

const s = styleframe();

useTransitionPropertyUtility(s, {
    none: 'none',
    all: 'all',
    default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
    colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
    opacity: 'opacity',
    shadow: 'box-shadow',
    transform: 'transform',
});

export default s;

styleframe/index.css

._transition\:none {
    transition-property: none;
}

._transition\:all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration--fast);
}

._transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration--fast);
}

._transition\:colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration--fast);
}

._transition\:opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration--fast);
}

._transition\:shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration--fast);
}

._transition\:transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration--fast);
}

<button class="_transition:colors">Animated color changes</button>
<div class="_transition:transform">Animated transform</div>
<div class="_transition">All common properties animate</div>

`useTransitionDurationUtility`

The useTransitionDurationUtility() function creates utility classes for setting transition duration. It uses the duration namespace, so you can reference duration design tokens with the @ prefix.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useTransitionDurationUtility } from "@styleframe/theme";

const s = styleframe();

useTransitionDurationUtility(s, {
    fast: '@fast',
    normal: '@normal',
    slow: '@slow',
});

export default s;

styleframe/index.css

._transition-duration\:fast { transition-duration: var(--duration--fast); }
._transition-duration\:normal { transition-duration: var(--duration--normal); }
._transition-duration\:slow { transition-duration: var(--duration--slow); }

<button class="_transition:colors _transition-duration:fast">Fast transition</button>
<div class="_transition:opacity _transition-duration:slow">Slower fade</div>

Pro tip: The duration namespace means @fast automatically resolves to var(--duration--fast). You can also pass explicit values like '200ms' for one-off durations.

`useTransitionTimingFunctionUtility`

The useTransitionTimingFunctionUtility() function creates utility classes for setting easing functions.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useTransitionTimingFunctionUtility } from "@styleframe/theme";

const s = styleframe();

useTransitionTimingFunctionUtility(s, {
    linear: 'linear',
    in: 'cubic-bezier(0.4, 0, 1, 1)',
    out: 'cubic-bezier(0, 0, 0.2, 1)',
    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
});

export default s;

styleframe/index.css

._transition-timing\:linear { transition-timing-function: linear; }
._transition-timing\:in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
._transition-timing\:out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
._transition-timing\:in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

<div class="_transition:transform _transition-timing:out">Ease out</div>
<div class="_transition:opacity _transition-timing:in-out">Smooth in and out</div>

Easing Functions

Value	Description
`linear`	Constant speed throughout
`in`	Starts slow, accelerates (ease-in)
`out`	Starts fast, decelerates (ease-out)
`in-out`	Slow start and end (ease-in-out)

`useTransitionDelayUtility`

The useTransitionDelayUtility() function creates utility classes for delaying transitions. It uses the duration namespace, so you can reference duration design tokens with the @ prefix.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useTransitionDelayUtility } from "@styleframe/theme";

const s = styleframe();

useTransitionDelayUtility(s, {
    fast: '@fast',
    normal: '@normal',
    slow: '@slow',
});

export default s;

styleframe/index.css

._transition-delay\:fast { transition-delay: var(--duration--fast); }
._transition-delay\:normal { transition-delay: var(--duration--normal); }
._transition-delay\:slow { transition-delay: var(--duration--slow); }

<div class="_transition:colors _transition-delay:fast">Delayed color transition</div>
<div class="_transition:transform _transition-delay:slow">Delayed transform</div>

Examples

Hover Transition

styleframe.config.ts

import { styleframe } from "styleframe";
import { useTransitionPropertyUtility, useTransitionDurationUtility } from "@styleframe/theme";
import { useBackgroundColorUtility } from "@styleframe/theme";

const s = styleframe();
const { modifier } = s;

const hover = modifier('hover', ({ declarations }) => ({
    '&:hover': declarations,
}));

useTransitionPropertyUtility(s, {
    colors: 'color, background-color, border-color',
});

useTransitionDurationUtility(s, {
    '200': '200ms',
});

useBackgroundColorUtility(s, {
    gray: '#f3f4f6',
    primary: '#006cff',
});

useBackgroundColorUtility(s, { primary: '#006cff' }, [hover]);

export default s;

styleframe/index.css

._transition\:colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration--fast);
}

._transition-duration\:200 { transition-duration: 200ms; }

._bg\:gray { background-color: #f3f4f6; }
._bg\:primary { background-color: #006cff; }
._hover\:bg\:primary:hover { background-color: #006cff; }

Usage in HTML:

<button class="_bg:gray _hover:bg:primary _transition:colors _transition-duration:200">
    Hover me
</button>

Best Practices

Keep durations short: Most UI transitions should be 150-300ms
Use appropriate easing: Ease-out for entering, ease-in for leaving
Avoid animating layout: Prefer transform and opacity for performance
Be consistent: Use the same timing across similar interactions
Respect reduced motion: Consider users who prefer reduced motion

FAQ

Edit this pageorReport an issue

Transforms

Create transform utilities for rotate, scale, translate, skew, and perspective with full type safety.

Typography

Create typography utilities for font families, sizes, weights, colors, alignment, and text decoration with full type safety.