`interpolate-size și calc-size() (animarea lui height: auto)` în CSS

Tranziții și Animații Chrome 129 (Firefox și Safari: încă nu)

Permite tranziții și animații spre și dinspre valori ca auto, min-content sau fit-content (de exemplu height: auto la acordeoane).

Sintaxă CSS

:root {
  interpolate-size: allow-keywords;
}

.panou { height: 0; transition: height 0.3s; }
.panou.deschis { height: auto; }

/* varianta punctuală */
.panou.deschis { height: calc-size(auto, size); }

Ce face `interpolate-size și calc-size() (animarea lui height: auto)`

Ani de zile, transition: height nu funcționa între 0 și auto: înălțimea sărea brusc. interpolate-size: allow-keywords le spune browserelor că pot calcula valorile intermediare dintre o lungime și un cuvânt cheie de mărime (auto, min-content, max-content, fit-content).

Proprietatea se moștenește, așa că de obicei se pune o singură dată pe :root. Alternativa punctuală este funcția calc-size(auto, size), care se poate folosi și în calcule: calc-size(auto, size + 20px).

În octombrie 2026, ambele există doar în Chrome și Edge (de la versiunea 129). Firefox și Safari ignoră regula, iar panoul se deschide instantaneu, fără animație. Este deci o îmbunătățire progresivă: pagina funcționează oriunde, animația apare doar unde e suportată.

Valori uzuale

Valoare	Descriere
`interpolate-size: numeric-only`	Valoarea implicită: se animă doar valori numerice (px, %, rem).
`interpolate-size: allow-keywords`	Permite animarea între lungimi și auto, min-content, max-content, fit-content.
`calc-size(auto, size)`	Transformă un cuvânt cheie de mărime într-o valoare care se poate anima.
`calc-size(auto, size * 0.5)`	Folosește mărimea calculată într-o expresie (aici, jumătate din înălțimea automată).

Exemple

Exemplul 1: Acordeon de întrebări frecvente cu deschidere lină

Pe :root se activează interpolarea; panoul trece de la 0 la înălțimea conținutului.

:root {
  interpolate-size: allow-keywords;
}
.raspuns {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
.intrebare.deschisa .raspuns {
  height: auto;
}

Efect vizual în browser

În Chrome, răspunsul la „Cât costă livrarea în Iași?” se desface lin până la înălțimea textului. În Firefox și Safari apare instantaneu, fără animație.

Exemplul 2: Buton care se lărgește până la lățimea textului

calc-size() aplicat doar pe un element, fără regula globală.

.buton-cos {
  width: 48px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.3s ease;
}
.buton-cos:hover {
  width: calc-size(fit-content, size);
}