{"id":4899,"date":"2021-11-10T01:00:00","date_gmt":"2021-11-10T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/css-animations-scroll\/"},"modified":"2024-07-16T20:04:53","modified_gmt":"2024-07-16T18:04:53","slug":"css-animations-scroll","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-animations-scroll\/","title":{"rendered":"How to Create CSS Animations on Scroll [With Examples]"},"content":{"rendered":"\n

CSS Scroll animations<\/strong> are a great way to bring boring and static sites to life and give the reader a more interesting, unique, and modern experience.<\/p>\n\n\n\n

In this post, you will learn how to trigger CSS animations on scroll.<\/strong><\/p>\n\n\n\n

And… who knows? Maybe you will end up creating unique websites like these scroll-animated websites<\/a>.<\/p>\n\n\n\n

What are CSS Scroll Animations?<\/h2>\n\n\n\n

CSS scroll animations are animations that get triggered using CSS when the user scrolls through a website.<\/strong> Usually, the scroll-driven animation is triggered when the element comes into view, and it can be applied to practically any element, such as text, images, and videos.<\/p>\n\n\n\n

Our eyes are naturally attracted to movement so this feature will entice and keep the visitor engaged. Adding eye-catching animations<\/a> to your website will make it stand out from the rest, and when used properly, scroll animations can add a modern touch to a website.<\/p>\n\n\n\n

Any CSS Scroll animation<\/strong> usually involves using a plugin or library, but we will show you how to achieve this without those. And we will do it in two ways, one using new experimental CSS features and in the traditional way that involves using plain JavaScript.<\/p>\n\n\n\n

So, let\u2019s get to it.<\/p>\n\n\n\n

Scroll-based Animations with Pure CSS<\/h2>\n\n\n\n

Traditionally, scroll-driven animations<\/strong> using only CSS were not possible. However, there are now new CSS experimental properties that allow us to do so.<\/p>\n\n\n\n

If you prefer not to rely on external libraries or JavaScript, you can still trigger CSS-based animations on scroll<\/strong> by using the CSS property animation-timeline<\/a><\/code> and the scroll()<\/a><\/code> function as its value. <\/p>\n\n\n\n