Motion Design с помощью CSS — это практический курс, который поможет вам раскрыть весь потенциал CSS-анимаций и эффектов переходов. Вы узнаете, как создать динамичный, жизнерадостный и современный интерфейс, используя нативные веб‑технологии без сторонних библиотек и тяжелых фреймворков.
Что дает обучение Motion Design на CSS
Современные интерфейсы строятся на плавности, интерактивности и эмоциональности. Используя возможности CSS, вы сможете не только улучшить пользовательский опыт, но и повысить визуальную ценность продукта.
Ключевые преимущества CSS-анимаций
Высокая производительность — нативные CSS-анимации обрабатываются браузером эффективно и не перегружают систему.
Простота внедрения — легко подключить, масштабировать и поддерживать.
Гибкость — сочетание transitions, transforms и keyframes позволяет создавать как минималистичные, так и сложные эффекты.
Совместимость — все современные браузеры отлично поддерживают CSS-анимации.
Чему вы научитесь на курсе
Курс раскрывает как базовые, так и продвинутые приемы работы с анимацией, предлагая практические примеры и подробные разборы.
Основные навыки
Создание плавных CSS transitions для улучшения интерактивности.
Работа с @keyframes и построение сложных анимационных последовательностей.
Использование transform для 2D и 3D-анимации.
Применение цветовой динамики, градиентов и визуальных эффектов.
Оптимизация анимаций для лучшей производительности.
Практика и примеры
Каждый модуль включает яркие демо, фрагменты кода и разборы, что делает обучение доступным и увлекательным даже для новичков.
Для кого подходит этот курс
Материал подойдет разработчикам любого уровня — от начинающих верстальщиков до опытных фронтенд-инженеров.
Курс будет полезен, если вы хотите
Добавить интерактивности в свои веб‑проекты.
Освоить motion design без сложных инструментов и редакторов.
Улучшить UX за счет плавности и выразительности интерфейса.
Изучить современные техники анимации, применимые в реальных продуктах.
Почему стоит пройти этот курс
Этот видеокурс сочетает насыщенные лекции, демонстрации и веселые примеры, позволяя легко освоить искусство движения в вебе. Вы получите набор инструментов, который поможет оживить ваши приложения и сделать их визуально привлекательными.
Итог
Motion Design с помощью CSS — это идеальный старт для тех, кто хочет быстро и эффективно освоить создание современного анимированного интерфейса на чистом CSS.
Удален по просьбе правообладателя
Урок 1.00:04:43
Introduction
Урок 2.00:07:42
CSS Transitions
Урок 3.00:04:19
Exercise 1: Rolling a Ball
Урок 4.00:04:13
Transitioning Multiple Properties
Урок 5.00:03:23
Demonstration: Changing the Ball’s Color
Урок 6.00:13:02
Duration
Урок 7.00:04:08
Browser Developer Tools
Урок 8.00:09:40
Timing Functions
Урок 9.00:04:41
Exercise 2: Applying Physics to the Ball
Урок 10.00:05:37
CSS Transitions Summary
Урок 11.00:05:29
CSS Animations
Урок 12.00:05:36
Sprite Animation with CSS
Урок 13.00:01:50
Exercise 3: Making a Walk-Cycle
Урок 14.00:07:18
Exercise 3 Solution
Урок 16.00:00:55
Exercise 4: Wag the Cat
Урок 17.00:02:35
Exercise 4: Solution
Урок 18.00:06:00
CSS Animations Summary
Урок 19.00:07:16
Stateful Transitions & Supplemental Animations
Урок 20.00:05:56
Causal Effects and Decorative Animations
Урок 21.00:09:48
Jump Cuts and In-Betweening
Урок 22.00:05:36
Drawing Attention
Урок 23.00:04:25
Animation Design Summary
Урок 24.00:04:14
Static vs. Dynamic Animations
Урок 25.00:00:48
Exercise 5: Sensing Visual Play Readiness
Урок 26.00:09:14
Exercise 5 Solution
Урок 27.00:04:03
Exercise 6: Falling up the Hole
Урок 28.00:08:18
Exercise 6 Solution
Урок 29.00:07:10
Managing State
Урок 30.00:04:26
Sequencing
Урок 31.00:02:28
Exercise 7: Sitting Tuna Down
Урок 32.00:10:15
Chaining Animations with Event Listeners
Урок 33.00:01:39
Exercise 8: Sitting Tuna Down with Event Listeners
FrontendMasters — одна из ведущих онлайн-платформ для изучения фронтенд- и веб-разработки. Курсы представлены в формате видеоворкшопов и преподаются практикующими экспертами из крупных технологических компаний. Платформа охватывает широкий спектр современных технологий (JavaScript, React, TypeScript и др.) и делает упор на глубокое понимание и применение знаний на практике.
Aside of jquery things, this course is much better than David's imo.
GetUseNet
Never mind the missing video #15, this course is old, the newer & recommended one by FEM right now is called CSS Animations and Transitions by David Khourshid Although the 2 courses are from 2 different authors
CSS Animations and Transitions by David Khourshid
Although the 2 courses are from 2 different authors
There're 41 videos total!