Будущее CSS-анимаций — scroll-timeline, animation-timeline и animation-range, JS больше не нужен!

✏️ Изучаем Scroll-driven Animations API — применяем новые CSS-свойства scroll-timeline, view-timeline, animation-timeline и animation-range на практических примерах.

🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:30​ | Стандартное поведение анимации
▶ 01:30​ | Отслеживание скролла — свойство scroll-timeline (scroll-timeline-name, scroll-timeline-axis)
▶ 02:51​ | Свойство animation-timeline
▶ 04:19​ | Прогресс скролла страницы
▶ 05:19​ | Фиксированная (”липкая”) шапка с анимацией при скролле вниз
▶ 06:08​ | Свойство animation-range
▶ 07:10​ | Плавное появление элементов при скролле
▶ 08:00​ | Свойств view-timeline-name
▶ 09:00​ | Другие возможности Scroll-driven Animations API
▶ 09:13​ | Заключение

📚 Ссылки:
➖ Scroll-driven Animations примеры: https://scroll-driven-animations.style/

💬 Чат в телеграмме (помощь новичкам):
https://t.me/friendlyFrontendChat

🔸 Boosty (поддержать канал):
https://boosty.to/friendly-frontend

🗂️ Бесплатные курсы на канале:
🟠 HTML:    • HTML курс 2024  
🔵 CSS:    • CSS курс 2024  
🟡 JS:    • JavaScript курс 2024  
🟢 A11y:    • Accessibility курс 2024  
⚪️ Мастер-класс по верстке для новичков:    • Верстка Kropp Fitness (HTML, CSS)  
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Верстка Positivus (HTML, БЭМ, SCSS)  
🗺 Frontend Roadmap 2024    • Frontend Roadmap 2024 | Что должен уч...  

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/friendlyFrontend
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Solvery: https://solvery.io/mentor/aleksanderl...

#frontend #фронтенд #css