Home / Snippets / Animation & Motion /
Multi-property transition
Transition multiple CSS properties simultaneously, each with its own duration and easing — no JavaScript required.
Lift
Hover me
Shift
Hover me
Morph
Hover me
Quick implementation
<!-- Markup Structure -->
<div class="card">
<h3>Title</h3>
<p>Content</p>
</div>
/* CSS */
.card {
/* Default state */
background-color: oklch(0.25 0.02 260);
border-radius: 0.5rem;
transform: scale(1);
transition:
background-color 0.3s ease,
transform 0.3s ease,
border-radius 0.3s ease;
}
.card:hover {
background-color: oklch(0.35 0.04 260);
transform: scale(1.05);
border-radius: 1rem;
}Prompt this to your LLM
Includes role, constraints, and framework variants.
Role: Senior Frontend Engineer specializing in CSS architecture.
Goal: Create a reusable CSS class that transitions multiple properties (background, transform, border-radius) simultaneously but with different durations and easing functions for a natural feel.
Technical Constraints:
1. Use the comma-separated transition shorthand syntax (e.g., `transition: prop1 dur1 ease1, prop2 dur2 ease2`).
2. Do NOT use `transition: all`. It is a performance anti-pattern that triggers full style recalc.
3. Use `oklch()` for all color values.
4. Ensure `transform` and `opacity` are used for layout changes to utilize the compositor layer.
5. Include a `@media (prefers-reduced-motion: reduce)` block to disable animations.
Framework Variants:
A) Vanilla CSS: Provide a standard class-based solution.
B) React/Tailwind: Provide a solution using arbitrary values in Tailwind (e.g., `transition-[background-color_0.3s_ease,transform_0.5s_cubic-bezier(...)]`).
Edge Cases:
1. Handling focus-visible states for keyboard users.
2. Ensuring contrast ratios remain accessible during color transitions.
3. Preventing layout thrashing by avoiding width/height transitions.Why this matters in 2026
The multi-value transition shorthand has effectively replaced the lazy transition: all pattern. While all is convenient, it forces the browser to calculate transitions for every property that changes, often triggering expensive layout recalculations. By explicitly listing properties with individual durations and easings, we achieve a more natural, "organic" feel—where a card might lift instantly but change color slowly. This granularity is now baseline supported across all modern browsers.
The logic
The syntax transition: property duration timing-function delay can be repeated with commas. Each entry in the comma-separated list maps to a specific property. This allows background-color to ease out slowly while transform snaps in quickly. This decoupling creates complex, layered interactions without a single line of JavaScript.
Accessibility & performance
Always include @media (prefers-reduced-motion: reduce) to respect user settings. For performance, prioritize animating transform and opacity as they are compositor-layer properties (GPU accelerated). Avoid animating layout-triggering properties like width, height, or margin, as these force the browser to recalculate the layout of surrounding elements on every frame.