[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 формате как здесь