👩‍💻 Анимация по высоте/ширине авто (без хаков)

Всего три строки кода, и вы получаете плавный переход к height: auto.

& {
  interpolate-size: allow-keywords;
}
p {
  transition: 1s;
}
p:not(:hover) {
  height: 5lh;
}

Все волшебство выполняет interpolate-size: allow-keywords. Подробнее об этом читайте в статье Анимация height: auto; (и другие ключевые слова внутреннего размера) в CSS.

👩‍💻 Посмотреть пример на CodePen

Пока поддерживается только в Chromium-based браузерах.

✅ 👩‍💻 Chrome, 👩‍💻 Edge, 👩‍💻 Brave.
❌ 👩‍💻 Firefox, 👩‍💻 Vivaldi и Яндекс Браузер.

📱 @dev_notes_ru

#css #feature #animation