Transitions
Flexible transition utilities for duration, delay, property, and timing function. Use the compact ts-* shorthand for most interactions, or reach for individual utilities when you need granular control.
Shorthand Syntax
The ts-* utility maps to the CSS transition property. Write the transition parts with underscores, using the same flexible order CSS accepts: property, duration, timing function, and delay can be arranged by meaning rather than by a required position.
Applies a transition duration in milliseconds.
ts-300Uses two time values: duration first, delay second.
ts-300_100Limits the transition to a property. The property can come before or after the duration.
ts-bgc_300Combines property, duration, timing function, and delay in a CSS-like order.
ts-bgc_300_ease_100 Accepted Value Forms
Transition properties can be written as Maple shortcuts, kebab-case CSS property names, or camelCase CSS property names. Time values can use Maple's time scale or explicit CSS units, and timing functions can use named keywords or bracketed CSS values.
Uses Maple's property aliases.
ts-300_bgc_easeUses the standard CSS property name.
ts-300_200_background-color_easeUses the JavaScript-style CSS property name.
ts-300_200_backgroundColor_easeUses CSS time units and a bracketed timing function.
ts-300ms_200ms_bgc_[cubic-bezier(0.42,0,0.58,1)]Reading Transition Parts
300 becomes 300ms. When two time values appear, the first time is the duration and the second time is the delay, just like CSS transition shorthand. Properties may use Maple shortcuts like bgc, kebab-case names like background-color, or camelCase names like backgroundColor. Simple Transitions
Use duration-only transitions when several properties should animate together. This is the fastest way to make hover, focus, and active states feel intentional without spelling out every transition component.
<!-- Duration only -->
<button class="ts-150 &:hover:bgc-accent-500">150ms</button>
<button class="ts-300 &:hover:bgc-accent-500">300ms</button>
<button class="ts-900 &:hover:bgc-accent-500">900ms</button>
Property Transitions
Add a property segment when only one value should animate. This keeps interactions predictable, especially when an element changes layout, color, and shadow at the same time.
<!-- Only background-color transition -->
<button class="ts-bgc_900 &:hover:bgc-accent-500 &:hover:c-white">
Background only
</button>
<!-- Only color transition -->
<button class="ts-c_900 &:hover:bgc-accent-500 &:hover:c-white">
Text only
</button>
Property Variable Resolution
bgc, c, or brc) as well as kebab-case and camelCase property names. So you can use any of these forms: tsprop-bgc, tsprop-background-color, tsprop-backgroundColor. Additionally, these properties undergo variable resolution. If you want a property to be used directly without being resolved—so that, for example, color outputs as a literal string instead of triggering variable fallback code—you can use bracket or equals syntax like tsprop-[color] or tsprop=color. Custom Properties
You can define custom property groups using CSS variables. Prefix a variable with --tsprop- followed by a custom name, and assign it a comma-separated list of properties. You can then use this name as a property segment in your transition utilities.
<!-- 1. Define custom properties via CSS variables -->
<div class="--prop-colors=color,background-color,border-color">
<!-- 2. Use the alias in transition utilities -->
<button class="
tsdur-900 tsprop-colors wc-colors
&:hover:bgc-accent-500 &:hover:c-white &:hover:brc-accent-600
">
Custom colors transition
</button>
</div>
Delays and Timing
The full shorthand lets you add a delay and timing function in the same class. Use this for staged interactions, subtle reveals, and motion that needs a specific easing curve.
<div class="group">
<!-- transition with no delay -->
<div class="ts-ms_500_ease-in-out_0 ^.group:hover:ms-64"></div>
<!-- transition with a 500ms delay -->
<div class="ts-ms_500_ease_500 ^.group:hover:ms-64"></div>
<!-- transition with a 500ms delay and a custom timing function -->
<div class="ts-ms_500_[cubic-bezier(0.42,0,0.58,1)]_500 ^.group:hover:ms-64"></div>
</div>
Multiple Transitions
Separate transition definitions with commas when different properties need different timing. Each item follows the same shorthand syntax, so you can tune color, background, transforms, and other properties independently.
<!-- background-color: 600ms,
border-color: 600ms,
color: 600ms,
transform: 300ms ease-out -->
<button class="
ts-bgc_600,brc_600,c_600,tf_300_ease-out
&:hover:bgc-accent-500 &:hover:c-white &:hover:brc-accent-600 &:hover:scale-1.1
">
background, border-color, color, and scale
</button>
Individual Utilities
Individual utilities map directly to the underlying CSS transition properties. They are useful when a component already defines one part of a transition and you only want to override another part. tsprop-* accepts comma-separated property names for transitioning multiple properties. Each item can be a Maple shortcut, a kebab-case CSS property, or a camelCase CSS property.
tsdur-*transition-durationtsdur-300tsdel-*transition-delaytsdel-100tsprop-*transition-propertytsprop-bgc,c,margin-right,paddingRighttstf-*transition-timing-functiontstf-ease
<button class="
tsdur-300 tsdel-100 tsprop-bgc,c tstf-ease
&:hover:bgc-calm-500 &:hover:c-white
">
<!-- transition-duration: 300ms,
transition-delay: 100ms,
transition-property: background-color and color,
transition-timing-function: ease -->
</button>
Will Change
The wc-* utility maps to will-change. Use it as a targeted performance hint for properties that are about to animate. Like tsprop-*, it accepts comma-separated Maple shortcuts, kebab-case CSS properties, and camelCase CSS properties.
<!-- Single property hint -->
<button class="wc-brc">
<!-- will-change: border-color -->
</button>
<!-- Multiple property hints -->
<button class="wc-bgc,c,tf">
<!-- will-change: background-color, color, transform -->
</button>
Related Properties
Refer to the underlying CSS properties for granular transition and performance control.