Overview
A focused builder for the transition shorthand with a hoverable preview box. You choose the property to animate, set a duration from 0.05 to 3 seconds, pick one of seven easing keywords including the step functions, and add an optional delay. Hovering the preview square applies a background, scale, rotation and shadow change so you can feel the curve rather than imagine it.
How It Works
Select the target property from the dropdown; options include all, opacity, transform, background-color and box-shadow. Enter a duration between 0.05 and 3 seconds in 0.05 steps, choose an easing from the dropdown, and set a delay from 0 to 2 seconds. Hover the preview box to watch it turn green, grow to 1.15 scale, rotate six degrees and gain a shadow, all governed by your transition. The code panel shows the shorthand with the delay omitted entirely when it is zero, and Copy CSS places the transition declaration on the clipboard.
Step-by-Step Usage Guide
- Pick the property the transition should cover.
- Set duration, easing and an optional delay.
- Hover the preview box to feel the timing curve.
- Copy the transition declaration.
Technical Specifications & Standards
The preview box changes four properties at once even when you scoped the transition to a single property, which is itself instructive: transition only animates the properties you list, so with transition: opacity 0.3s the box still snaps instantly between colours while opacity eases. The keyword list includes step-start and step-end, the two extremes of the steps() timing family, which jump between states with no interpolation at all. Delays run in both directions: a delay set here also postpones the reverse transition when the pointer leaves, and asymmetric leave behaviour requires overriding the property inside the hover state. The emitted shorthand omits the delay when it is zero to keep the output clean, since transition: all 0.3s ease and transition: all 0.3s ease 0s are equivalent.
Targeted Use Cases
- Buttons and links that ease background or shadow changes on hover.
- Accordions and dropdowns where a short delay prevents accidental flicker.
- Cards that scale or rotate smoothly when the pointer enters.
- Step-function effects like tick-box flips that should snap, not glide.
Notes & Gotchas
- Transition transform and opacity for the smoothest results; animating width or height forces layout every frame.
- Keep interface transitions between 150 and 300 milliseconds.
- Scope the property instead of using all, so unrelated changes do not inherit a slow fade.
- Remember the delay applies on the way out too; override it in the hover rule for asymmetric behaviour.
Frequently Asked Questions
Why does the preview box still snap some changes?
Only the property you selected is transitioned. The preview intentionally changes background, transform, opacity and box-shadow together, so choosing, say, opacity leaves the other three changing instantly. That contrast is part of the lesson.
What is the difference between ease and linear?
ease starts fast and decelerates, while linear moves at constant speed. ease suits UI feedback; linear suits loops and colour cycling where acceleration looks artificial.
When is the delay included in the output?
Only when it is greater than zero. A zero delay is omitted because transition: property duration easing and the same declaration with an explicit 0s delay behave identically.
What do step-start and step-end do?
They are step timing functions: the value jumps between the start and end states with no interpolation. step-start jumps immediately at the beginning, step-end holds the start value until the duration elapses.