Blog/February 5, 2026

Yumma CSS 3.11

New transition property variants for height & width to simplify dimension animations.

Transition Properties

This release expands the transitions system with three new utility properties specifically designed for animating element dimensions.

Targeting these specifically provides better performance & control.

The tp-* (transition-property) category now includes three new prefixes:

Prefix	Property
`tp-h`	`transition-property: height;`
`tp-w`	`transition-property: width;`
`tp-d`	`transition-property: height, width;`

These utilities are ideal for accordions, dropdowns, or any component requiring smooth size transitions.

<div class="w-16 h-16 tp-d td-300 tdu-300 ttf-io h:w-32 h:h-32"></div>

If only one axis requires animation, use the specific utilities:

<!-- Height animation -->
<div class="tp-h h:h-64"></div>

<!-- Width animation -->
<div class="tp-w h:w-64"></div>

Check the Upgrading Guide for a full list of utility renames & removals.

pnpm up yummacss@latest