Когда я впервые увидел, как простой блок на сайте плавно разворачивается и выезжает, я подумал: «Вот это магия». На самом деле, за этой магией стоят CSS анимации и трансформации. Если вы, как и я, пишете на PHP и иногда верстаете, то рано или поздно столкнетесь с задачей оживить страницу. Не пугайтесь, это не ракетостроение. Давайте разберемся, как это работает, на примерах из жизни.

Представьте, что вы делаете интернет-магазин на PHP. Товары выводятся в виде карточек. Хочется, чтобы при наведении на карточку она чуть приподнималась и показывала тень. Или чтобы при клике на кнопку «Купить» появлялась анимация загрузки. Вот тут и пригодятся CSS анимации и трансформации. Они легкие, быстрые и не грузят сервер, в отличие от JavaScript-решений.

Что такое трансформация и анимация простыми словами

Трансформация — это изменение формы, размера или положения элемента без изменения его исходного места в документе. Например, вы можете повернуть картинку на 45 градусов или увеличить кнопку в два раза. Анимация — это плавное изменение свойств элемента во времени. Например, квадрат медленно превращается в круг.

В CSS за трансформации отвечает свойство transform. Оно может принимать значения: rotate (поворот), scale (масштаб), translate (сдвиг), skew (наклон). А за анимации — свойства animation и transition. Transition делает плавный переход между состояниями, а animation позволяет создать сложные последовательности.

Transition: плавность в один клик

Transition — это самый простой способ добавить анимацию. Вы задаете стартовое состояние, конечное (например, при наведении) и указываете, как долго будет длиться переход. Допустим, у вас есть кнопка. При наведении она меняет цвет фона. Без transition это происходит мгновенно, а с ним — плавно за 0.3 секунды.

Вот пример кода для кнопки:

.btn {
  background-color: blue;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: red;
}

Здесь мы говорим: «фон меняйся плавно за 0.3 секунды с эффектом ease (сначала быстро, потом замедление)». Можно анимировать несколько свойств сразу, перечислив их через запятую.

Transform: двигаем, крутим, увеличиваем

Transform часто используют вместе с transition. Например, при наведении на карточку товара она увеличивается на 10% и отбрасывает тень. Это выглядит эффектно и не требует сложного кода.

Пример для карточки:

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Обратите внимание: мы анимируем transform и box-shadow. Transform scale(1.05) увеличивает элемент на 5%. Если нужно сдвинуть, используем translate, например, translateX(20px) — сдвиг вправо на 20 пикселей.

Animation: когда нужно больше, чем просто hover

Transition хорош для простых эффектов при наведении или фокусе. Но если вам нужно, чтобы анимация повторялась, шла по циклу или имела сложную последовательность, используйте animation. Он работает с ключевыми кадрами (keyframes).

Допустим, вы хотите сделать пульсирующую кнопку «Купить», чтобы привлекать внимание. Вот как это выглядит:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.btn-buy {
  animation: pulse 2s infinite;
}

Здесь мы создали анимацию pulse: от обычного размера (0%) до увеличенного (50%) и обратно (100%). Кнопка будет пульсировать бесконечно (infinite) каждые 2 секунды.

Сравнение transition и animation

Свойство Transition Animation
Запуск По событию (hover, focus) Автоматически или по классу
Повторение Только один раз Можно задать количество или infinite
Сложность Простая, одно свойство Сложная, несколько ключевых кадров
Производительность Высокая Высокая, если анимировать transform/opacity
Правило: Для плавности всегда анимируйте только свойства transform и opacity. Они не вызывают перерисовку страницы (reflow) и работают быстрее. Избегайте анимации width, height, margin, так как они тормозят.

Производительность: почему сайт тормозит и как это исправить

Когда вы анимируете элемент, браузер выполняет три этапа: Layout (расчет положения), Paint (отрисовка) и Composite (сборка). Анимация transform и opacity работает только на этапе Composite, что быстро. Анимация же width или left вызывает Layout и Paint, что медленно. Поэтому, если хотите двигать элемент, используйте transform: translateX() вместо left.

Еще один совет: используйте will-change. Это свойство подсказывает браузеру, что элемент будет анимироваться, и он готовит ресурсы заранее. Но не злоупотребляйте, иначе память утечет.

.card {
  will-change: transform;
}

Практический пример: анимация загрузки для PHP-приложения

Представьте, что вы отправляете форму через AJAX на PHP. Пока идет запрос, нужно показать спиннер. Сделаем его на чистом CSS без картинок.

HTML:

CSS:

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid blue;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Этот спиннер будет крутиться бесконечно. Когда запрос завершится, вы добавите класс .hidden (display: none) через JavaScript или PHP.

Распространенные ошибки и как их избежать

  • Слишком много анимаций одновременно. Браузер может не справиться. Оптимизируйте: используйте requestAnimationFrame для JS-анимаций или CSS-анимации с transform.
  • Забыли про вендорные префиксы. Для старых браузеров нужно писать -webkit-, -moz- и т.д. Но сейчас большинство современных браузеров поддерживают стандартные свойства.
  • Анимация на мобильных устройствах. Там процессор слабее. Уменьшайте количество анимированных элементов и используйте transform.
  • Не тестируете на реальных устройствах. В браузере разработчика все гладко, а на телефоне может тормозить. Проверяйте.
Лайфхак: Если анимация дергается или тормозит, добавьте свойство backface-visibility: hidden; или perspective: 1000px; к анимированному элементу. Это заставляет браузер использовать аппаратное ускорение.

Заключение: что в итоге

CSS анимации и трансформации — мощный инструмент, который делает сайт живым и привлекательным. Главное — помнить о производительности: анимируйте transform и opacity, избегайте layout-свойств. Начинайте с transition для простых эффектов, переходите к animation для сложных сценариев. И всегда тестируйте на мобильных устройствах.

Теперь вы можете добавить плавности своим PHP-проектам без танцев с бубном. Попробуйте прямо сегодня: возьмите карточку товара и добавьте эффект при наведении. Уверен, результат вас порадует.

Студия WNDER