Vi har alle vært der. Du prøver å lage en smooth animasjon av en infoboks eller trekkspill som skal vise og skjule innhold, men høyden på elementet er jo selvfølgelig avhengig av mengden innhold. Du prøver likevel og minnes nok en gang på at transition ikke fungerer på verdier som ikke er kjent i forkant. Man kan selvfølgelig løse dette med javascript og finne ut den endelige høyden i DOM-en, men hva om man kunne løst dette med bare CSS?

Med interpolate-size: allow-keywords; kan du nettopp det. Når du setter denne regelen vil man kunne bruke både animation og transition på lengdeverdier som fit-content, max-content og auto.

Her kommer de dårlige nyhetene dessverre. Denne regelen er ganske dårlig støttet med kun støtte i Chrome for øyeblikket. Forhåpentligvis er det ikke lenge før den blir litt mer tilgjengelig!