CSS translateY: руководство по вертикальному смещению и анимации

Допустим, вам нужно сдвинуть элемент по вертикали — вверх или вниз на определённое расстояние. CSS-функция translateY() делает именно это. Она является частью свойства transform и описана в черновике CSS Transforms Module Level 1.

Как это работает

Синтаксис прост:

<translateY()> = translateY( <length-percentage> )

Формально это означает: перемести элемент по вертикали на указанную величину.

Аргументы

<length>: Положительные значения (например, 80px) смещают элемент вниз; отрицательные (например, -24ch) — вверх.
<percentage>: Относительно собственной высоты элемента. Так, translateY(50%) на блоке высотой 100px сместит его на 50px вниз, а translateY(-100%) — на 100px вверх.

Зачем использовать в продакшене?

В отличие от margin-top или top, translateY() не вызывает перекомпоновку (reflow) и не влияет на положение других элементов. Исходное место в макете остаётся зарезервированным. Это делает функцию идеальной для анимаций и hover-эффектов на дашбордах, карточках статистики или полях форм — особенно в одностраничных приложениях и корзинах интернет-магазинов.

Практический пример: выезжающие карточки статистики

Представьте дашборд (.dashboard) с карточками, которые должны выезжать вверх при скролле или клике. Сначала сместим их на 50px вниз и скроем:

.stat-card {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s ease-in,
    transform 0.8s ease-in,
    box-shadow 0.3s ease;
}

При активации .dashboard.active они становятся видимыми и возвращаются на своё естественное место:

.dashboard.active .stat-card {
  opacity: 1;
  transform: translateY(0);
}

При наведении добавим микроанимацию, приподняв карточку на 8px:

.dashboard.active .stat-card:hover {
  transform: translateY(-8px);
}

Анимация фокуса на полях формы

UI-библиотеки вроде MUI используют похожую технику для «плавающих» подписей. Подпись находится внутри поля как плейсхолдер (абсолютное позиционирование), а затем translateY(-32px) поднимает её при фокусе или вводе текста:

label {
  position: absolute;
  left: 15px;
  top: 15px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  transform: translateY(-32px) scale(0.8);
  color: #6200ee;
  font-weight: bold;
}

Осторожно: мерцание при наведении

Если применить translateY() напрямую к :hover, и элемент сдвинется далеко от курсора, он потеряет состояние наведения и вернётся обратно — возникнет цикл мерцания. Решение: обернуть элемент в родителя и применить псевдокласс к нему:

.parent:hover .good {
  transform: translateY(160px);
}

Локальные особенности для бизнеса на Кипре / в ЕС

При разработке многоязычных сайтов (EN, RU, EL) помните: translateY() работает одинаково во всех браузерах и языковых версиях — не требуется языковых переопределений. Функция лёгкая и не зависит от внешних библиотек, что помогает соблюдать требования GDPR (меньше зависимостей от третьих сторон). Для интернет-магазинов плавные микро-взаимодействия (например, наведение на карточку или анимация подписей) напрямую улучшают восприятие скорости и повышают конверсию.

Демо

Посмотрите встроенный CodePen, чтобы увидеть translateY() в действии с карточками статистики, полями форм и решением проблемы мерцания.

62px

translateY()