Веб-разработка: анимации (css, js, библиотеки)

Опубликовано: 04 Октябрь 2024
на канале: loftblog

8,348

343

Освойте профессию frontend-разработчика: https://cutt.ly/ZlrGwBF
Автор: Эржан Торокулов, Principal Engineer в компании Toptal (Core team)
На вебинаре рассмотрим:
Введение в анимации в вебе
Анимации в CSS
CSS Transitions + примеры
CSS Animations + примеры
Анимации в JS
requestAnimationFrame + примеры
Web Animation API + примеры
Вопрос/ответ
Бонус: библиотеки для анимаций
Animate.css
Hover.css
Bounce.js
Anime.js

Занятие рассчитано на новичков.
После вебинара у вас будут исходники, с которыми вы сможете поработать самостоятельно.

Подпишитесь на канал и поставьте напоминание, чтобы не пропустить.
Презентация - https://animations-in-web.netlify.app

Таймкоды:
0:00 Начало
02:50 О себе
03:20 Маршрут вебинара
04:04 Зачем использовать анимации
04:47 Виды анимации
06:37 CSS Transitions
10:30 Пример CSS Transitions
16:30 CSS Animations
23:15 Пример CSS Animations
26:43 JS анимации
27:28 requestAnimationFrame
32:09 Приме requestAnimationFrame
41:12 Web Animations API
47:07 Примеры Web Animations API
54:55 Итоги
56:26 Бонус. Библиотеки для анимации
59:09 Animate.css
1:02:48 Hover.css
1:05:57 Bounce.js
1:10:13 Anime.js
1:13:24 Другие библиотеки
1:15:45 Ответы на вопросы