Мастер анимаций: CSS и JS-анимации

Раздел 1. Основы анимации

Узнаете о принципах работы с анимациями, научитесь использовать CSS-свойство transition и создадите простые анимационные переходы в CSS.

• Способы создания анимаций
• Физиология восприятия анимации. Понятие FPS
• CSS-свойство transition
• Примеры простых анимаций с использованием одного элемента
• Принципы создания анимации
• Практика: переходы при наведении на кнопки, анимация карточек товаров для интернет-магазина, переходы на кнопках соцсетей
• 10 пошаговых демонстраций с примерами создания анимаций
• Тест по разделу

Раздел 2. CSS-анимации по ховеру

Рассмотрим CSS-свойство transition-timing-function и узнаете о часто встречающихся ошибках при создании анимаций. Создадите более сложные анимационные переходы и сценарии анимаций.

• Свойство transition-timing-function
• Частые ошибки при создании простых анимаций
• Примеры анимаций с использованием дочерних элементов и псевдоэлементов
• Практика: усложнённая анимация карточек товара, анимации ссылок и кнопок
• 14 пошаговых демонстраций с примерами создания анимаций
• Тест по разделу

Раздел 3. CSS правило @keyframes и группа свойств animation CSS

Разберёте анимации, созданные с помощью @keyframes, и группу свойств animation.

• Правило @keyframes и его применение
• CSS-свойства animation и transition. Использование animation на практике
• Смягчение начала и конца движения
• Подготовка (упреждение)
• Практика: анимирование элементов сайта премиальных беговых кед
• 8 пошаговых демонстраций с примерами создания анимаций
• 2 тренажёра по CSS-анимациям
• Тест по разделу

Раздел 4. Анимации с пользовательским взаимодействием

Научитесь добавлять анимации при клике, движении мыши и прокрутке страницы.

• Использование CSS-анимаций по клику
• Событие анимации
• Анимация открытия и закрытия меню
• Бесконечный слайдер изображений
• Анимация изображений и подписи слайдера
• Аккордеон с поочерёдным переключением вкладок
• Табы с анимацией переключения
• Анимации по скроллу
• Практика: создание анимаций по клику и скроллу
• 17 пошаговых демонстраций с примерами создания анимаций
• Тест по разделу

Раздел 5. 3D в CSS и параллакс-эффект

Узнаете, как создавать эффект параллакса и эффектные 3D-анимации.

• Параллакс-эффект и 3D-трансформации в CSS
• 3D-трансформации с JavaScript
• Практика: создание 3D-эффектов для карточек товаров, шапки страницы и анимации первого экрана сайта
• 12 пошаговых демонстраций с примерами создания анимаций
• Тест по разделу

Раздел 6. Производительность CSS-анимаций

Познакомитесь с инструментами для отладки и научитесь оптимизировать анимации.

• Линейные и покадровые анимации
• Инструменты для отладки анимации и производительности анимации
• Оптимизация производительности CSS-анимации
• Медиазапросы prefers-reduced-motion и update
• Тест по разделу

Раздел 7. Итоговый раздел

• Подводим итоги курса
• Библиотеки CSS-анимаций
• Финальный тест