CSS: анимации и переменные

Суть в одном предложении

Продвинутый CSS — это transition/animation с keyframes, transform без рефлоу и кастомные свойства (переменные) для темизации.

Краткое определение

Продвинутый уровень: transition для плавного перехода между состояниями, @keyframes + animation для многошаговых анимаций, transform (translate/scale/rotate) как более производительная альтернатива изменению top/left, и CSS custom properties (--var) с var() для переиспользуемых значений и тем.

Ключевые моменты

• transform и opacity анимируются без пересчёта layout — дешевле для производительности
• @keyframes описывает промежуточные состояния анимации в процентах
• CSS-переменная объявляется как --name и читается через var(--name, fallback)
• will-change подсказывает браузеру заранее подготовить слой для анимации