CSS-свойства доступные для анимации

В Motion One наиболее эффективно анимируются свойства, влияющие на композиционный слой браузера. Главную роль здесь играет transform, поскольку он не вызывает перерасчёт layout и не приводит к дорогостоящим reflow-операциям.

Ключевые функции transform:

  • translateX, translateY, translateZ
  • scale, scaleX, scaleY
  • rotate, rotateZ, rotateX, rotateY
  • skewX, skewY

Пример логики работы в Motion One:

animate(element, {
  transform: "translateX(200px) rotate(45deg) scale(1.2)"
})

Внутри Motion One эти значения разбиваются на отдельные трансформации, что позволяет библиотеке интерполировать каждую компоненту независимо. Это обеспечивает плавность даже при сложных комбинированных анимациях.

Особое значение имеет порядок трансформаций. В CSS он критичен, и Motion One сохраняет предсказуемость вычислений, следуя спецификации: сначала масштабирование, затем поворот, затем перемещение.

opacity — управление прозрачностью без затрат на layout

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

Motion One интерполирует значение от 0 до 1:

animate(element, {
  opacity: [0, 1]
})

Переходы через промежуточные значения не требуют дополнительных вычислений layout или paint, поэтому opacity часто используется в комбинации с transform для построения сложных сцен появления и исчезновения элементов.

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

width, height и свойства геометрии

Анимация размеров относится к более затратным операциям. Свойства width и height вызывают перерасчёт layout, что может снижать производительность при большом количестве элементов.

Тем не менее Motion One поддерживает их анимацию напрямую:

animate(element, {
  width: ["100px", "300px"],
  height: ["50px", "200px"]
})

Такие анимации следует рассматривать как layout-driven. Каждый кадр требует пересчёта геометрии, что особенно заметно при сложной DOM-структуре.

Альтернативный подход — замена геометрических свойств на transform:

animate(element, {
  scaleX: [1, 2],
  scaleY: [1, 2]
})

Этот вариант не изменяет поток документа и остаётся производительным.

Цветовые свойства: background, color, border

Motion One поддерживает интерполяцию цветовых значений в различных форматах:

  • HEX
  • RGB / RGBA
  • HSL / HSLA

Наиболее часто анимируются:

  • background-color
  • color
  • border-color
  • fill и stroke (для SVG)

Пример:

animate(element, {
  backgroundColor: ["#000000", "#ff6600"],
  color: ["rgb(0,0,0)", "rgb(255,255,255)"]
})

Интерполяция выполняется через преобразование цветов в линейное пространство, что позволяет получать равномерные переходы без резких скачков яркости.

SVG-свойства fill и stroke ведут себя аналогично, но дополнительно учитывают особенности векторной графики, где каждый контур может иметь независимую стилизацию.

filter — визуальные эффекты в реальном времени

Свойство filter открывает доступ к ряду графических эффектов:

  • blur
  • brightness
  • contrast
  • grayscale
  • saturate
  • hue-rotate
  • drop-shadow

Motion One позволяет анимировать составные фильтры:

animate(element, {
  filter: [
    "blur(0px) brightness(1)",
    "blur(6px) brightness(1.5)"
  ]
})

Особенность filter заключается в том, что он может быть вычислительно дорогим. Особенно это касается blur, который требует значительных ресурсов GPU или CPU в зависимости от реализации браузера.

Комбинирование нескольких фильтров усиливает нагрузку, поэтому интерполяция сложных значений требует осторожного проектирования сцен.

box-shadow — глубина и визуальная иерархия

box-shadow позволяет создавать иллюзию глубины и освещения. Motion One поддерживает анимацию всех компонентов тени:

  • смещение по X и Y
  • радиус размытия
  • радиус распространения
  • цвет

Пример:

animate(element, {
  boxShadow: [
    "0px 0px 0px rgba(0,0,0,0)",
    "0px 10px 30px rgba(0,0,0,0.3)"
  ]
})

Интерполяция тени включает одновременное изменение нескольких параметров, что требует аккуратного расчёта промежуточных состояний. Особенно важно учитывать альфа-канал, так как он влияет на восприятие глубины.

clip-path — управление видимостью через маски

Свойство clip-path используется для создания сложных переходов формы элементов. Motion One поддерживает базовые геометрические функции:

  • circle()
  • ellipse()
  • inset()
  • polygon()

Пример:

animate(element, {
  clipPath: [
    "circle(0% at 50% 50%)",
    "circle(100% at 50% 50%)"
  ]
})

Анимация clip-path требует пересчёта геометрии отрисовки, что делает её более затратной по сравнению с transform и opacity. Однако она остаётся ключевым инструментом для сцен, где требуется изменение формы, а не только положения.

SVG-свойства: stroke-dashoffset и анимация линий

Motion One активно используется для SVG-анимаций, особенно для эффекта прорисовки линий.

Основные свойства:

  • stroke-dashoffset
  • stroke-dasharray
  • pathLength (в некоторых сценариях)

Пример:

animate(path, {
  strokeDashoffset: [1, 0]
})

Такой подход создаёт эффект постепенного рисования контура. SVG-анимации обладают высокой точностью, поскольку работают напрямую с векторной моделью.

Scroll-driven свойства и производные значения

Motion One поддерживает привязку анимаций к прокрутке, где значения CSS-свойств могут изменяться в зависимости от прогресса scroll-сцены.

Чаще всего используются:

  • transform
  • opacity
  • filter

Пример логики:

animate(element, {
  opacity: [0, 1],
  transform: ["translateY(50px)", "translateY(0px)"]
}, {
  timeline: scroll(element)
})

Такие анимации позволяют связывать визуальные изменения с физическим движением страницы, сохраняя синхронизацию между состоянием интерфейса и прокруткой.

Свойства, ограниченные производительностью

Не все CSS-свойства одинаково подходят для анимации. Некоторые из них неизбежно вызывают reflow:

  • top / left / right / bottom
  • margin
  • padding
  • width / height (в контексте сложных layout)
  • display (неанимируемо напрямую)

Motion One позволяет задавать такие анимации, но их использование требует понимания последствий.

Наиболее критичные моменты:

  • перерасчёт геометрии документа
  • повторный paint
  • возможная деградация FPS

Переменные CSS и их анимация

CSS custom properties (--variables) открывают дополнительный слой гибкости. Motion One может интерполировать их как числовые или цветовые значения:

animate(element, {
  "--progress": [0, 1]
})

Далее переменная может использоваться внутри CSS:

.element {
  transform: scale(var(--progress));
}

Такой подход позволяет разделять вычислительную и визуальную части анимации, снижая нагрузку на JavaScript и повышая переиспользуемость стилей.

Итоговая структура категорий анимируемых свойств

Все CSS-свойства, используемые в Motion One, условно делятся на три группы:

1. Композиционные (наиболее быстрые) transform, opacity

2. Визуальные (средняя нагрузка) color, background, filter, box-shadow, clip-path

3. Layout-driven (наиболее дорогие) width, height, margin, padding, position

Понимание принадлежности свойства к одной из групп определяет поведение анимации, её плавность и влияние на производительность интерфейса.

Оглавление