Обзор новинок CSS: Анимация и новые функции

Введение

Господа и дамы, рад представить вашему вниманию обзор свежайших новинок CSS, особенно в области анимации дискретных свойств. В прошлом году я уже касался этой темы, но раскрыл её недостаточно подробно, поэтому многие не поняли, насколько это важная функция. В своё оправдание скажу, что информации тогда было очень мало.

Дискретные и интерполируемые свойства

Прежде всего, необходимо понимать, что все свойства делятся на дискретные и интерполируемые. Интерполируемые свойства, такие как transform, могут иметь промежуточные состояния. Например, если у нас происходит переход (transition) длительностью в одну секунду между 0 и 10 пикселями, то в течение этой секунды значение будет постепенно меняться от 0 до 10 пикселей.

Дискретные свойства, такие как display, не имеют промежуточных состояний. Поэтому, когда с такими свойствами пытаются сделать переход, значение переходит сразу от начального к конечному. Таким образом, дискретные свойства не могут анимироваться. Более того, они мешают анимировать другие свойства. Например, при использовании display мы не увидим анимацию прозрачности.

Проблемы анимации с дискретными свойствами

Нельзя анимировать элементы с дискретными свойствами, такими как display и content-visibility.
Невозможно анимировать элементы, которые только что появились в render tree, так как у них нет начального состояния.

Я всегда думал, что нашёл свой авторский способ обойти эти проблемы, назначая анимацию на момент открытия элемента. Однако оказалось, что этот подход довольно распространён в сообществе.

Новые директивы для анимации

Теперь появилась новая директива starting style, которая позволяет задавать первоначальные стили. Например, чтобы анимировать вход нового элемента списка, мы можем установить его прозрачность и высоту на 0, а затем задать стили для открытого состояния. Это позволяет карточке анимироваться при появлении.

Для анимации выхода карточки с экрана мы применяем класс с стилями opacity: 0, height: 0, display: none и небольшой трансформацией. Однако, если мы просто удалим карточку, анимация не сработает из-за применения display.

Новое свойство Transition Behavior

Чтобы элементы с дискретными свойствами анимировались, появилось новое свойство Transition Behavior. Установка transition-behavior: allow-discrete позволяет дискретным свойствам вести себя так, как будто они интерполируемые. Это значит, что теперь мы можем анимировать display.

Применение новых функций

Также стоит упомянуть о функции calc-size, которая решает проблему анимации автоматически выставленной высоты. Она работает аналогично классической функции calc, но умеет вычислять значения, такие как auto, min-content, fit-content и другие.

Motion Path

Новый вид анимации — Motion Path, который позволяет перемещать элемент по любой траектории. Эта технология вдохновлена SVG и базируется на пяти свойствах:

offset-distance
offset-anchor
offset-position
offset-path
offset-rotate

С помощью этих свойств можно задать любую траекторию движения элемента.

Контейнерные запросы

Контейнерные запросы позволяют применять стили к элементам в зависимости от размера их контейнера. Это полезно для адаптивного дизайна, особенно в флекс-контейнерах.

Новые типографические свойства

Свойство text-rap-pretty помогает избежать "вдовы" и "сироты" в текстовых блоках, улучшая читаемость. Также введено свойство hanging-punctuation, которое позволяет настроить поведение знаков препинания в начале или конце строки.

Заключение

Лично я рад двум моментам: многие новинки решают исторические проблемы, особенно в области анимации, и время внедрения новых функций в браузерах значительно сократилось. Не забывайте про наше сообщество и поддерживайте нас!