Width and Height Transitions
Transitioning width and height triggers layout recalculation on every frame, which can cause jank. Use max-height or transform: scaleY() for better performance when possible.
CSS
Intermediate
5 min read
Transitioning Width and Height
Example
/* Expanding width — ok for small elements */
.progress-bar {
width: 0%;
transition: width 1s ease;
}
.progress-bar.loaded { width: 100%; }
/* max-height trick for expand/collapse */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.open { max-height: 500px; } Pro Tip
The max-height trick has a catch: the animation speed depends on the actual height vs the max-height value.