Динамические эффекты на чистом CSS

Влад Мержевич

Если вы хотите делать крутые анимации на чистом CSS, как на гифках, то самое время пройти тренажёр «Динамические эффекты».

Это тренажёр для более продвинутых студентов, понимающих основы HTML и CSS. В нём вы научитесь оживлять элементы интерфейса с помощью анимации и трансформации.

Тренажёр состоит из двух частей — «Плавные переходы» и «Анимация». Всего в них 60 заданий. В первой части вы изучите, как плавно менять CSS-свойства, создадите красивые и функциональные элементы форм — радиокнопки, чекбоксы, переключатели и прочие.

Вторая часть посвящена основам анимации на CSS. В ней вы будете двигать, поворачивать и видоизменять объекты. Вы узнаете, как создавать направление, задержку, остановку и запуск анимации.

Тренажёр можно пройти по ссылке.

Материалы о фронтенде, вёрстке и карьере в IT — раз в неделю в редакторской рассылке HTML Academy.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.