CSS transitions

CSS transitions позволяют плавно изменять значения CSS-свойств элементов при изменении их состояния. Это мощный инструмент для создания анимаций без использования JavaScript. Ключевым моментом является определение свойства, которое будет анимироваться, длительности анимации и функции временной кривой.

.element {
  transition-property: background-color, transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}
  • transition-property — перечисляет свойства, которые будут анимированы. Можно указать all, чтобы применять к любому изменению свойства.
  • transition-duration — длительность анимации. Можно задавать в секундах (s) или миллисекундах (ms).
  • transition-timing-function — функция ускорения, например: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier().
  • transition-delay — задержка перед началом анимации.

Пошаговое применение

  1. Определение начального состояния элемента:
.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition: all 0.3s ease;
}
  1. Определение состояния при событии:
.box:hover {
  background-color: red;
  transform: scale(1.2);
}

При наведении .box плавно изменяет цвет и размер в течение 0.3 секунд с функцией ускорения ease.

Функции временной кривой

Функции кривой ускорения определяют динамику изменения значения свойства:

  • linear — постоянная скорость анимации.
  • ease — медленный старт, ускорение в середине, замедление в конце.
  • ease-in — медленный старт, ускорение к концу.
  • ease-out — быстрое начало, замедление к концу.
  • ease-in-out — медленный старт и конец, ускорение в середине.
  • cubic-bezier(x1, y1, x2, y2) — кастомная кривая для точного контроля.

Трансформации и transitions

Чаще всего transitions применяются к свойствам transform и opacity:

.card {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.card.hidden {
  transform: translateY(50px);
  opacity: 0;
}

Использование transform вместо изменения top или left повышает производительность, так как многие браузеры используют GPU-ускорение для трансформаций.

Составные свойства

Можно объединять несколько свойств через запятую:

.button {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
  background-color: green;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

Каждое свойство может иметь свои индивидуальные длительность и функцию кривой:

.element {
  transition: background-color 0.3s linear, transform 0.5s ease-in-out;
}

Использование с Packery

Библиотека Packery отвечает за динамическое расположение элементов в сетке с возможностью перестройки при изменении размера или добавлении новых элементов. CSS transitions в этом контексте позволяют делать перестановку плавной, улучшая визуальное восприятие.

.grid-item {
  transition: transform 0.5s ease;
}

При перестроении сетки Packery добавляет стили transform: translate3d(x, y, 0) для перемещения элементов. Благодаря CSS transitions элементы переходят на новые позиции плавно, создавая эффект анимации без использования дополнительных JavaScript-анимаций.

Задержка и последовательность

Можно использовать transition-delay для создания последовательных анимаций:

.grid-item:nth-child(1) { transition-delay: 0s; }
.grid-item:nth-child(2) { transition-delay: 0.1s; }
.grid-item:nth-child(3) { transition-delay: 0.2s; }

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

Практические рекомендации

  • Использовать transitions с transform и opacity для повышения производительности.
  • Избегать анимации свойств, которые вызывают перерасчет макета (width, height, margin), особенно на большом количестве элементов.
  • Использовать индивидуальные кривые и задержки для создания сложных визуальных эффектов без JS.
  • В комбинации с Packery transitions делают сетку динамичной, но плавной, улучшая UX.

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

Оглавление