Начнём с новых фич, связанных с анимацией. И тут действительно много интересного.
Scroll-driven animations
Представьте сайты, где при прокрутке летают и появляются элементы. Для подобных задач обычно используются библиотеки, вроде GSAP Scrolltrigger. Так вот, Scroll-driven animations — это встроенный способ делать анимации, привязанные к прокрутке или появлению в области просмотра. Причём делать это можно как в CSS, так и в Javascript (Web Animations API). Подробнее про Scroll-driven animations, небольшой видео-курс по Scroll-driven animations, примеры на сайте scroll-driven-animations.style, полифилл. Доступно в Chrome и Edge 115+ и Firefox Nightly.
Same-document View Transitions
Одна из горячо обсуждаемых новинок. View Transitions — это API для анимации переходоа между страницами, правда пока только для SPA. При помощи этого API можно реализовать бесшовные переходы между экранами приложения, как на мобильных устройствах. Подробнее про Same-document View Transitions. Доступно в Chrome и Edge 111+.
View Transition Classes
View Transition продолжает развиваться. Новая фича добавляет возможность применять одну анимацию к группе однотипных элементов с указанным классом. Например, можно анимировать изменение порядка карточек в результате сортировки, фильтрации, добавления или удаления их из списка. Подробнее про View Transition Classes. Доступно в Chrome и Edge 125+.
View Transition Types
Другое улучшение для View Transition API — типы, чтобы задавать разные анимации для перехода со одной страницы на другую и обратно. Например, переход с главной на каталог происходит как slide-left (главная уезжает влево, каталог выезжает справа). А обратная анимация slide-right (каталог уезжает вправо, главная выезжает слева). Подробнее про View Transition Types. Доступно в Chrome и Edge 125+.
Cross-document View Transition
А вот это вообще киллер-фича — анимированные переходы между страницами обычных многостраничных сайтов. И для этого не нужно делать SPA. Кстати, похожее умел делать ещё Internet Explorer 5.5 🌚, а Chrome вот-вот научится. Подробнее про Cross-document View Transition. Доступно в Chrome и Edge 126+.
Scoped transitions, Gesture-driven transitions, Navigation matching in CSS
Всё это про будущие доработки и улучшения View Transition API. Интеракция с частями страницы во время анимации, основанные на жестах анимации (переключение страниц свайпами влево-вправо на телефонах, удаление элементов смахиванием вверх) и полное управление анимацией через CSS.
Animate display and content-visibility on a keyframe timeline
Свойства
display и content-visibility не анимируются. Приходится использовать костыли, чтобы красиво показать диалоговое окно. Так вот, появляется возможность анимировать свойство display внутри @keyframes. Свойства применятся в самом начале или конце таймлайна анимации. Подробнее про анимацию display и content-visibility. Доступно в Chrome и Edge 116+ и Safari TP.transition-behavior: allow-discrete
А если нужно анимировать
display при помощи transition? Добавляется новое свойство transition-behavior: allow-discrete, которое включает режим анимации дискретных свойств (в том числе display). Подробнее про transition-behavior. Доступно в Chrome и Edge 117+ и Safari 17.4.@starting-style
А если хочется анимировать какие-то свойства при появлении элемента? Для этого добавлена директива
@starting-style. Она позволяет задавать стартовые значения свойств, которые будут анимированы к новым значениям, указанным для элемента. Подробнее про @starting-styles. Доступно в Chrome и Edge 117+ и Safari 17.5.overlay
С внедрением
<dialog> и Popover API, в браузерах появился отдельный слой top-layer и псевдо-элемент ::backdrop. Есть необходимость как-то это анимировать. overlay даёт возможность делать плавные анимации появления и исчезновения диалогов и попапов в сочетании с @starting-style и allow-discrete. Подробнее про overlay. Доступно в Chrome и Edge 117+.