[HTML Academy] Онлайн-курс «Анимации, часть 1. CSS-анимации»

[HTML Academy] Онлайн-курс «Анимации, часть 1. CSS-анимации»


Разработчик интерфейсов мидл-уровня знает, как оживить интерактивные элементы с помощью анимаций. В первой части курса вы научитесь делать CSS-анимации любого уровня сложности: микро-анимации, анимации без взаимодействия пользователя, анимации по движению мыши и по скроллу.​

Спойлер: Программа курса

Раздел 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 аnimation или CSS переходы. CSS аnimation на практике
— Смягчение начала и конца движения
— Подготовка, или упреждение
— Практика: анимирование элементов сайта премиальных беговых кед
‍
— Тест по разделу
— 8 кейсов по материалам раздела
— 2 тренажёра на тему раздела

Раздел 4

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

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

--- Тест по разделу
--- 17 кейсов по материалам раздела

Раздел 5

3D в CSS и параллакс-эффект
Узнаем про эффект параллакса и как его можно добиться с помощью JavaScript. Поговорим о 3D в CSS, научимся делать эффектные объёмные анимации.
‍
— Параллакс-эффект и 3D-трансформации в CSS
— Практика: 3D-поворот карточек товара при наведении
— Практика: 3D-шапка при прокрутке
‍
— 3D-трансформации c JavaScript
— Практика: 3D-анимация первого экрана сайта
‍
— Тест по разделу
— 12 кейсов по материалам раздела

Раздел 6

Производительность CSS-анимаций
Познакомимся с разными видами анимаций и обсудим производительность. Рассмотрим конкретные инструменты оптимизации для линейных анимаций.

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

— Тест по разделу

Раздел 7

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

Нужен организатор, который сможет выдать материал в удобном html формате как здесь

Продажник: Скрытая ссылка