Структура CSS-классов AOS

Библиотека AOS (Animate On Scroll) опирается на заранее определённую систему CSS-классов, которые динамически добавляются и удаляются в процессе прокрутки страницы. Эти классы управляют состояниями элементов, их анимациями и переходами.

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

Ключевые классы состояния

.aos-init

Присваивается элементу сразу после инициализации AOS.

Назначение:

  • фиксирует исходное состояние элемента
  • используется как точка отсчёта для анимации

Особенности:

  • применяется ко всем элементам с атрибутом data-aos
  • содержит начальные стили (обычно opacity, transform)

Пример:

.aos-init {
  opacity: 0;
  transition-property: transform, opacity;
}

.aos-animate

Добавляется, когда элемент попадает в область видимости (viewport).

Назначение:

  • запускает анимацию
  • переводит элемент в финальное состояние

Пример:

.aos-animate {
  opacity: 1;
  transform: translate(0, 0);
}

Механика работы:

  1. элемент имеет .aos-init
  2. при скролле добавляется .aos-animate
  3. CSS-переходы выполняются автоматически

Классы, связанные с типами анимаций

AOS использует атрибут data-aos, который определяет тип анимации. Под каждый тип генерируется соответствующий CSS-селектор.

Пример структуры:

<div data-aos="fade-up"></div>

Соответствующий CSS:

[data-aos="fade-up"] {
  transform: translateY(100px);
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
}

Популярные типы анимаций и их CSS-структура

Fade (затухание)

[data-aos="fade"] {
  opacity: 0;
}

[data-aos="fade"].aos-animate {
  opacity: 1;
}

Fade-up

[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

Fade-down

[data-aos="fade-down"] {
  opacity: 0;
  transform: translateY(-40px);
}

[data-aos="fade-down"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

Zoom-in

[data-aos="zoom-in"] {
  opacity: 0;
  transform: scale(0.6);
}

[data-aos="zoom-in"].aos-animate {
  opacity: 1;
  transform: scale(1);
}

Slide-left

[data-aos="slide-left"] {
  transform: translateX(100px);
}

[data-aos="slide-left"].aos-animate {
  transform: translateX(0);
}

Модификаторы и дополнительные классы

AOS активно использует дополнительные атрибуты, которые влияют на CSS через селекторы.

data-aos-duration

Управляет длительностью анимации.

[data-aos][data-aos-duration="1000"] {
  transition-duration: 1s;
}

data-aos-delay

Добавляет задержку перед началом анимации.

[data-aos][data-aos-delay="300"] {
  transition-delay: 0.3s;
}

data-aos-easing

Определяет функцию плавности.

[data-aos][data-aos-easing="ease-in-out"] {
  transition-timing-function: ease-in-out;
}

data-aos-anchor-placement

Влияет на момент срабатывания анимации, но косвенно может участвовать в CSS-логике через кастомные стили.

Глобальные классы контейнера

body[data-aos-easing], body[data-aos-duration]

AOS может применять глобальные настройки через body, которые затем наследуются элементами.

Пример:

body[data-aos-duration="800"] [data-aos] {
  transition-duration: 0.8s;
}

Переопределение стандартных классов

Система классов AOS полностью расширяема. Можно переопределять любые значения:

[data-aos="fade-up"] {
  transform: translateY(200px);
  opacity: 0;
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

Комбинирование селекторов

Возможна более сложная логика с использованием вложенных селекторов:

.section .card[data-aos="zoom-in"] {
  transform: scale(0.8);
}

.section .card[data-aos="zoom-in"].aos-animate {
  transform: scale(1);
}

Работа с медиа-запросами

Анимации могут адаптироваться под разные устройства:

@media (max-width: 768px) {
  [data-aos="fade-up"] {
    transform: translateY(20px);
  }
}

Использование CSS-переменных

Для гибкой настройки:

[data-aos] {
  --aos-distance: 50px;
  transform: translateY(var(--aos-distance));
}

[data-aos].aos-animate {
  transform: translateY(0);
}

Оптимизация и производительность

Ключевые рекомендации при работе с классами:

  • использовать transform вместо top/left
  • избегать тяжелых свойств (box-shadow, filter)
  • минимизировать количество одновременно анимируемых элементов

Пример оптимального класса:

[data-aos] {
  will-change: transform, opacity;
}

Пользовательские классы

Можно создавать собственные анимации, добавляя новые значения data-aos.

Пример:

<div data-aos="flip-x"></div>
[data-aos="flip-x"] {
  transform: rotateX(90deg);
  opacity: 0;
}

[data-aos="flip-x"].aos-animate {
  transform: rotateX(0);
  opacity: 1;
}

Взаимодействие с JavaScript

Классы .aos-init и .aos-animate управляются библиотекой автоматически, но при необходимости можно вмешиваться:

document.querySelector('.element').classList.add('aos-animate');

Итоговая схема работы классов

  1. Элемент получает:

    • data-aos="animation"
    • класс .aos-init

  2. В CSS задаётся:

    • начальное состояние ([data-aos="..."])
    • финальное состояние (.aos-animate)

  3. При скролле:

    • добавляется .aos-animate
    • запускается CSS transition

Визуальная модель

Система классов AOS строится по принципу:

атрибут → базовый стиль → модификатор состояния → переход

[data-aos="type"] → .aos-init → .aos-animate

Такой подход делает архитектуру:

  • предсказуемой
  • легко расширяемой
  • независимой от JavaScript-логики

Гибкость архитектуры

Благодаря тому, что вся анимация реализуется через CSS-классы:

  • можно полностью изменить внешний вид без изменения JS
  • легко интегрировать с другими CSS-фреймворками
  • возможно создавать сложные композиции анимаций

Расширенные паттерны

Каскадные анимации

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

Анимации при повторном появлении

AOS может повторно применять .aos-animate, если включён once: false. CSS-классы остаются теми же, но поведение меняется.

Интеграция с другими классами

.card.active[data-aos="fade-up"].aos-animate {
  transform: translateY(0) scale(1.05);
}

Практическая структура проекта

Часто используется следующая организация CSS:

/* Базовые состояния */
[data-aos] { ... }

/* Типы анимаций */
[data-aos="fade-up"] { ... }

/* Активное состояние */
.aos-animate { ... }

/* Модификаторы */
[data-aos-duration] { ... }
[data-aos-delay] { ... }

Такая структура делает код масштабируемым и удобным для поддержки при большом количестве анимированных элементов.

Оглавление