[HTML Academy] Онлайн-курс «Анимации, часть 1. CSS-анимации»
Разработчик интерфейсов мидл-уровня знает, как оживить интерактивные элементы с помощью анимаций. В первой части курса вы научитесь делать 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-анимаций
— Финальный тест
Основы анимации
Изучим историю появления веб-анимации, рассмотрим области применения анимаций.
Вы узнаете основные принципы работы с анимациями, научитесь применять 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 формате как
Продажник:
https://levelup.htmlacademy.ru/animation-basics