What Can and Can't Transition

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

interpolate

To work out the values between a start value and an end value, for example 40% of the way from 0 to 200 is 80.

discrete property

A property whose values are keywords with nothing between them, like display or text-align. It switches instead of blending.

allow-discrete

The transition-behavior value that lets a discrete property take part in a transition, flipping at 50%. display and visibility have special rules.

@starting-style

A rule that gives an element the style to start from on its first frame, when it has no earlier style to change from.

1. 1

   Find the half-way flip

   In "Four ways to flip", press 0.1×, press Switch all four, then pause and step one frame at a time near 500 ms. The text-align track is CSSTransition · text-align with a layout mark. The label is on the left at 480 ms and on the right at 520 ms, with no movement between: a flip, not a slide.

2. 2

   Take allow-discrete away

   In the #d rule, delete display 1000ms linear allow-discrete, so only the opacity item is left. Press Switch all four: the third box now vanishes in the first frame, exactly like the fourth, and its opacity fade is never seen because it is already gone.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: transition: all 300ms looks as if it animates everything. It does not. A menu that should fade out vanishes at once, a panel that should grow to its natural height jumps, a gradient swaps in a single frame, and nothing says why. Knowing the rule in advance saves hours of guessing.

2. 2

   Interpolation. To make the frames between two values the browser must interpolate: work out a value at, say, 37% of the way. It can do that for numbers (opacity, z-index, which rounds to a whole number), lengths and percentages (width, padding), colours, transforms, shadows, filters and shapes such as clip-path with matching functions. In the table below, nine of the fifteen properties made a transition. Each property's specification says how it can be animated (MDN lists them under animatable properties).

3. 3

   Discrete properties flip at 50%. A property whose values are keywords (text-align, border-style, position, display) has no in-between. By default the browser starts no transition for it, and transition: all leaves it out (measured: text-align: no transition). Add transition-behavior: allow-discrete (or the keyword in the shorthand, transition: text-align 1s allow-discrete) and it holds the old value for the first half and shows the new one for the second. Frozen at 480 ms of 1000 ms, text-align was start. At 520 ms it was right.

4. 4

   **visibility and display break the 50% rule on purpose.** For visibility, the element counts as visible for the whole transition if either end is visible. Fading out to hidden keeps it visible to the very end (measured: visible at 999 ms, hidden at 1010 ms). With allow-discrete, display works the same way: going to none it stays block until the end (measured: block at 999 ms, none at 1010 ms), and coming from none it turns on at the start. That lets an element fade out and then leave the layout.

5. 5

   **Entering from display: none needs @starting-style.** A transition needs a before-change style, and an element that was display: none has none. @starting-style { .panel.open { opacity: 0; } } supplies the values to start from on the first frame. The exercise fade-out-and-hide needs both allow-discrete and @starting-style: removing either breaks the fade (measured). Support (MDN, read 24 Oct 2026): @starting-style is Baseline 2024 (in all major browsers since August 2024); transition-behavior and interpolate-size are marked limited availability. Chrome shipped the first two in 117 and interpolate-size in 129. For older browsers, write the transition twice, once without allow-discrete and once with it: a browser that does not know the keyword drops the second line and keeps the first. The panel then still opens and closes, just without the fade.

6. 6

   **height: auto cannot transition.** The browser cannot blend 0px with the keyword auto (measured: no transition, the box jumps). The old workaround animates max-height to a big number, which gets the timing wrong, because the duration covers the whole range. Better: interpolate-size: allow-keywords makes auto animate (Chromium; elsewhere the box jumps, which is an acceptable fallback), or animate grid-template-rows from 0fr to 1fr on a grid wrapper (measured: it animates, but not in a straight line: 29.5 px of 118 at the half-way time). Phase 10 shows the general fix, FLIP.

7. 7

   Gradients and colour spaces. A gradient is an image, and images flip: a gradient to another gradient changes in one frame (measured). To animate one, animate the numbers inside it: register @property --stop { syntax: "<percentage>"; ... } and transition --stop (measured: 50% at 500 ms), or fade the opacity of a second layer, which is cheaper. Plain colours do interpolate. Between rgb(255 0 0) and rgb(0 0 255) the middle is rgb(128, 0, 128) (sRGB). With a modern function such as oklch(), Chromium blends in Oklab instead, and the in-between colours look cleaner.

• You can tell from the property's type whether it will transition, flip or do nothing

• You can fade an element out and take it out of the layout with allow-discrete

• You know why entering from display: none needs @starting-style

• You have a plan for height: auto and for gradients, and a fallback when it is not supported