Анимация height: auto и не только с помощью interpolate-size и calc-size
👩💻 Анимация по высоте/ширине авто (без хаков) Всего три строки кода, и вы получаете плавный переход к 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
Делаем анимацию фона (background) на css
Добрый день. Рассмотрим как просто сделать анимированный градиентный фон на чистом css. В этой статье сделаем градиентный фон и при помощи CSS стилей анимируем плавную смену градиента фона. Делаем простую страничку в HTML, примерно так: <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Тест</h1> </body> На этой странице подключена только таблица стилей и в теге body указан заголовок h1. Далее в файле styles.css вставляем такой текст: body { background: linear-gradient(90deg, rgba(132,128,194,1) 0%, rgba(177,177,218,0...