Брамус на Google I/O выступил с презентацией про сегодняшние и будущие возможности веб-анимаций. Ненавязчивые и короткие анимации делают интерфейсы более отзывчивыми и приятными, поэтому их определённо стоит добавлять.
Директива
@starting-style задаёт стили, применяемые к элементу при первой отрисовке. Предназначена для анимации появления скрытых элементов, таких как диалоги, поповеры или выпадающие меню.Ключевое слово
allow-discrete используется в свойстве transition для анимации дискретных свойств. Это позволяет анимировать элементы, скрытые с помощью display: none, а для диалогов ещё анимировать фон (overlay).Свойство
intetpolate-size: allow-keywords делает возможным анимацию размерных свойств, которые принимают в качестве значений ключевые слова max-content, min-content, auto. Включить можно для всей страницы или конкретного селектора.Альтернативно анимировать размеры с ключевыми словами можно через функцию
calc-size(). Она принимает ключевые слова и переменную с размером элемента, а также позволяет производить математические операции.Благодаря новому псевдо-элементу
::details-content в сочетании с упомянутыми allow-discrete и interpolate-size: allow-keywords можно анимировать раскрытие и сворачивание контента <details> произвольной высоты.Scroll-driven animations решают задачу анимации элементов с привязкой к прокрутке страницы. Они частично или полностью заменяют такие библиотеки, как AOS, SAL или даже GSAP.
View Transitions — это способ создавать анимированные переходы между обновлениями отображения в SPA или между загрузками страниц в MPA.
Анимации View Transitions можно настраивать в CSS с помощью псевдо-элементов и стандартного свойства
animation. Альтернативно можно использовать Web Animations API в JS.Для более удобной работы с группой элементов свойство
view-transition-name расширено значением match-element, чтобы не присваивать уникальный идентификатор каждому элементу. Либо идентификатор можно получать из атрибута id с помощью обновлённой функции attr().Свойство
view-transition-group позволяет создавать переходы во вложенных элементах, где сейчас игнорируется overflow. Можно указать значение contains у контейнера или nearest у его элементов.Scoped View Transitions расширяет стандартные возможности и позволяет вызвать переходы не для всего документа, а для конкретного DOM-элемента. Это полезно для анимации сортировки или удаления элементов.
В видео-презентации Брамуса много ссылок на документацию и примеры, потому что на анимации нужно смотреть, словами их описать сложно. Очень много всего появилось и появится в недалёком будущем для создания анимаций, и это круто.
#css