Awesome CSS animations: examples of stunning animations without external libraries

Star me on GitHub → 88 ⭐

This collection showcases popular techniques for animating one or multiple elements in real-world scenarios.

You'll find both CSS and JavaScript solutions that utilize the Web Animation API. Get ready to be inspired by these stunning animations!

Animate the removal or addition of an item in a list

Navigate to a specific item in a carousel slider

Make an element take up the entire page

Reading progress indicator

Animate the caret in an input field

Scroll down indicator

Blinking cursor

Typing indicator

Highlighting target element

Customer logos marquee

Skeleton loading

Pulse animation

Loading spinner

Flipping images

Indeterminate progress bar

Switching options

Toggling sidebar

Expanding search bar

Clicking overlay

Recent posts ⚡

Lazy load a Google Map

Lazy load a video

Lazy load an iframe

Lazy load a background image

Lazy load an image

Create a reusable component for IntersectionObserver

Create a reusable hook for IntersectionObserver

Use the IntersectionObserver API in React

An introduction to the IntersectionObserver API

Clipboard API fallback

Check if the Clipboard API is supported

Check if an element is visible in the viewport

Build a REST client

Simplify document cookies management

Build a SQL query builder

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn