Это третий раздел курса - переходим от статичной вёрстки к живым интерфейсам. Здесь ты научишься анимировать элементы без единой строчки JavaScript: делать плавные переходы при наведении, создавать анимации по кадрам через @keyframes, вращать и масштабировать элементы трансформациями, накладывать визуальные фильтры и собирать из всего этого готовые интерфейсные паттерны - кнопки, лоадеры, карточки. Уроки идут по порядку: от первого transition до продвинутого View Transitions API в конце раздела.
1. Переходы: transition
6 статейПервая группа - основа CSS-анимации: свойство transition оживляет любое обычное CSS-свойство при изменении, без единого кадра и без JavaScript.
Что такое CSS-переходы и как они работают
Как transition анимирует изменение свойства между двумя состояниями
Какие свойства можно анимировать: transition-property
Не все CSS-свойства поддаются плавному переходу - разбираемся, какие да
Длительность и задержка: transition-duration и transition-delay
Сколько длится переход и через какое время он стартует
Функции плавности: transition-timing-function
ease, linear, ease-in-out и свои кривые Безье
Сокращённое свойство transition
Все четыре параметра перехода в одной строке
Анимация при наведении: практика с transition и :hover
Собираем первую живую кнопку на чистом CSS
2. Трансформации: transform
8 статейЗдесь показано, как двигать, вращать, масштабировать и наклонять элементы свойством transform - и как эти трансформации комбинируются друг с другом.
Что такое CSS-трансформации: свойство transform
Меняем форму, размер и положение элемента, не трогая поток документа
Перемещение элементов: translate, translateX, translateY
Сдвигаем элемент по осям без влияния на соседей
Масштабирование: scale, scaleX, scaleY
Увеличиваем и уменьшаем элемент на месте
Поворот элементов: rotate
Вращаем элемент вокруг заданной точки
Наклон элементов: skew
Перекос по горизонтали и вертикали для нестандартных эффектов
Порядок и комбинирование трансформаций
Почему transform: rotate(45deg) scale(2) и обратный порядок дают разный результат
Точка трансформации: transform-origin
Меняем центр, вокруг которого происходит поворот и масштабирование
Матрица трансформаций: matrix() и matrix3d()
Как все трансформации на самом деле сводятся к одной матрице
3. Ключевые кадры и animation
8 статейЭта группа разбирает правило @keyframes и все свойства animation - от длительности и повтора до паузы и направления - для анимаций, которые запускаются сами по себе.
Правило @keyframes: создаём анимацию с нуля
Описываем состояния элемента в процентах или через from/to
Свойство animation-name и подключение анимации
Связываем описанные @keyframes с элементом
Длительность и повтор: animation-duration и animation-iteration-count
Сколько длится один цикл и сколько раз он повторяется
Направление анимации: animation-direction
normal, reverse, alternate и alternate-reverse
Функция плавности анимации: animation-timing-function
Та же кривая, что и в transition, но для покадровой анимации
Что происходит до и после: animation-fill-mode
Сохраняет ли элемент финальное состояние после окончания анимации
Пауза и запуск: animation-play-state
Ставим анимацию на паузу и запускаем её снова через JS или :hover
Сокращённое свойство animation и несколько анимаций сразу
Восемь параметров в одной строке и через запятую - для нескольких анимаций
4. Фильтры: filter
4 статьиCSS-фильтры меняют внешний вид элемента - размытие, яркость, оттенки и фильтры для фона - без обработки картинки в графическом редакторе.
Что такое CSS-фильтры: свойство filter
Визуальные эффекты, которые раньше делали только в Photoshop
Размытие и яркость: blur, brightness, contrast
Три самых востребованных фильтра на практике
Оттенки и насыщенность: grayscale, sepia, saturate, hue-rotate
Меняем цветовую палитру изображения без редактора
Фильтры для фона: backdrop-filter
Матовое стекло за полупрозрачным блоком
5. Практика: живые интерфейсы
5 статейВ практической группе все изученные свойства собираются в готовые паттерны: анимированные кнопки, появление контента при загрузке, лоадеры и карточки.
Анимированные кнопки и ссылки: практика
Собираем набор готовых hover-эффектов для интерфейса
Анимация появления элементов при загрузке страницы
Плавное появление контента вместо резкого скачка
Индикатор загрузки на чистом CSS
Крутящийся спиннер без единой картинки и без JS
Аккордеон и раскрывающееся меню с анимацией
Плавная высота вместо мгновенного display: none
Мини-проект: анимированная карточка товара
Собираем карточку с hover-эффектом, тенью и плавным появлением
6. Производительность и доступность
4 статьиЗаключительная группа показывает, как анимировать без просадки FPS, уважать пользователей с prefers-reduced-motion и подключить нативные переходы между страницами через View Transitions API.
Как анимации влияют на производительность страницы
Почему transform и opacity анимировать дешевле, чем width или top
Свойство will-change: подсказка браузеру
Заранее предупреждаем браузер о предстоящей анимации
Уважение к пользователю: prefers-reduced-motion
Отключаем анимации для тех, кому они мешают
Плавные переходы между страницами: View Transitions API
Нативный способ анимировать смену состояний без библиотек