[HTML Academy] Онлайн-курс «Анимации, часть 1. CSS-анимации»
Пройдя курс, вы получите востребованный навык и сможете:
- Улучшать пользовательский опыт взаимодействия с вашими интерфейсами
- Делать анимации по наведению, скроллу или движениям мыши
- Реализовывать задумки дизайнеров и делать современные анимации
- Добавлять как простые микро-анимации, так и сложносоставные анимации
- Самостоятельно добавлять в проект микро-анимации любого уровня
- Собирать сложносоставные анимации: лоудеры, эффект Кена Бернса и т.п.
- Добавлять анимации, зависимые от движения мыши --- например, параллакс
- Менять положение элементов и их видимость по скроллу
Раздел 1
Введение в анимацию и веб-анимацию
--- Что такое анимации, какие они бывают и какой эффект дают
— С чего начать делать анимацию
— Теория анимации
Раздел 2
CSS-анимации по ховеру
— CSS Transitions, свойство и его применение
— Использование анимаций по ховеру и по клику
Раздел 3
CSS правило @keyframes и группа свойств Animation CSS
--- @keyframes и его применение
--- CSS аnimation или CSS переходы. CSS аnimation на практике
Раздел 4
Работа с анимациями с помощью JavaScript
— Какие анимации можно делать на CSS, используя JavaScript
— Как подружить CSS и JavaScript
— Использование CSS-анимаций по клику
— Использование CSS-анимаций по движению мыши
— Использование CSS-анимаций по скроллу
Раздел 5
Параллакс
— Параллакс на чистом CSS
— Параллакс на JavaScript
Раздел 6
Производительность CSS-анимаций
— Отслеживания изменений в CSS. Процесс перерисовки страницы
— Таймлайн для проектирования сложных анимаций
--- Инструменты для отладки анимации и производительности анимации
— Производительность. CSS анимация на GPU
— Медиазапросы prefers-reduced-motion и update
Раздел 7
Дополнительные материалы
--- Web Animation API
--- CSS Houdini
--- Библиотеки и инструменты для упрощения работы с анимациями, таймлайнами, SVG, canvas, WebGL
--- GSAP
Введение в анимацию и веб-анимацию
--- Что такое анимации, какие они бывают и какой эффект дают
— С чего начать делать анимацию
— Теория анимации
Раздел 2
CSS-анимации по ховеру
— CSS Transitions, свойство и его применение
— Использование анимаций по ховеру и по клику
Раздел 3
CSS правило @keyframes и группа свойств Animation CSS
--- @keyframes и его применение
--- CSS аnimation или CSS переходы. CSS аnimation на практике
Раздел 4
Работа с анимациями с помощью JavaScript
— Какие анимации можно делать на CSS, используя JavaScript
— Как подружить CSS и JavaScript
— Использование CSS-анимаций по клику
— Использование CSS-анимаций по движению мыши
— Использование CSS-анимаций по скроллу
Раздел 5
Параллакс
— Параллакс на чистом CSS
— Параллакс на JavaScript
Раздел 6
Производительность CSS-анимаций
— Отслеживания изменений в CSS. Процесс перерисовки страницы
— Таймлайн для проектирования сложных анимаций
--- Инструменты для отладки анимации и производительности анимации
— Производительность. CSS анимация на GPU
— Медиазапросы prefers-reduced-motion и update
Раздел 7
Дополнительные материалы
--- Web Animation API
--- CSS Houdini
--- Библиотеки и инструменты для упрощения работы с анимациями, таймлайнами, SVG, canvas, WebGL
--- GSAP
https://levelup.htmlacademy.ru/animation-basics