.png)
In this post, I’m sharing 30 cool CSS animation examples that I have saved on my CodePen and references from time to time that have stuck with me over the years. Let’s get into it.
Table of Contents
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Download Free
All fields are required.
How do CSS animations work?
Animations, at their core, are frames playing one after another to show movement. With CSS, I can animate changes in the styles of an element, like its position, size, color, or opacity (level of color visibility), to create smooth transitions, interesting effects, or even guide a user through visuals. It’s a good way to give a website life without needing anything fancy.
Another reason I choose CSS animations is that they don’t need extra tools. No JavaScript or GIFs. Just HTML and CSS.
To build an animation with CSS, here’s what you need:
- An element in the HTML to animate.
- A CSS rule that attaches the animation using the animation property.
- A set of keyframes that show how the styles should change over time.
Here’s a simple example to show how it works:
I’m using CSS to animate an HTML div. I named the animation “my-animation,” and it runs in a 2-second interval loop.
It then reverses direction each time it restarts, creating a smooth back-and-forth motion.
Here’s a quick breakdown of the key properties I’m using:
- animation-name connects the div to the @keyframes rule named my-animation.
- animation-duration sets the full cycle to last 2 seconds.
- animation-direction tells it to reverse direction every other cycle.
- animation-iteration-count makes it run forever.
- animation-timing-function keeps the speed consistent with linear timing.
Inside the @keyframes my-animation block, I’m defining two stages:
From:- Background colour starts as coral orange (#ff7a59).
- The width is set to 300px.
- The top position is 10px.
- Background changes to dark blue (#33475b).
- The width shrinks down to 50px.
- Top position shifts to 100px.
From the example, what you see is that the div changes color as it moves down the screen and gets smaller. It then reverses all those actions in a loop.
I also used CSS positioning to keep it centred horizontally, using position — absolute with left: 0, right: 0, and margin: auto. That way, it stays centered during the animation.
CSS Animation Examples
Below, I’ve compiled CSS animation examples ranging from basic interaction effects to works of art (at least according to me). These examples are from CodePen, and I highly recommend you check them out.
I’ll start with CSS animation examples that use the traditional keyframe approach described in the section above. These examples are, generally, easier to replicate in your own projects.
1. Simple Loading Spinners
CSS animations can be used to create effects that we’re all familiar with, like these spinning load icons. Their meaning is almost universally understood. When I see it, I know I’ll be waiting for a bit (so I have a second to scroll on my second screen).
Luckily, these spinners are light on code as well. This particular CSS animation example shows how to achieve the spinning effect with a scalable vector graphic.
2. Simple CSS Loaders
Your website may need more than just a spinning circle. Perhaps a set of squares, a single pulsing dot, or falling lines better match your logo. That’s why I love this CodePen of different loaders. Whatever I’m building, I can find something that fits.
Here are some more loading CSS animations to try out, presented in a handy grid. Each one is smooth and elegant, so I can make my choice easily.
3. Rotating Changing Shapes
When learning to create my own CSS animations, I started by looking at simple examples where shapes morph and change. That’s why I recommend the CSS animation below.
Explaining how the shape transitions from a circle to a square can help you understand keyframes. Each transition applies at different keyframes throughout the animation.
4. Netflix-Inspired Logo Animation
When I started messing with advanced CSS animations, I saw this creative clone of the Netflix intro. This example uses custom HTML elements with SCSS for layout and animation. Each letter (like N, E, T, etc.) is dynamically rendered with helper containers that manage lighting and brush effects.
5. Animated Submit Button
I always enjoy the small, unexpected moments that savvy designers like to sprinkle throughout their web pages. These small touches make the experience more fun, especially if users are completing a routine task like submitting their information.
If you have a form on your website, this animated submit button offers a great way to grab visitors’ attention. This submit button is a clean, pleasing way to provide visual feedback indicating that an action has been completed. (Go ahead, press it yourself!)
6. Hot Coffee
CSS animations are used for much more than simple shapes. The code below demonstrates how you can add clean, minimal animations to a drawing to increase engagement. Here, applying CSS animation to translation, scale, and opacity fade breathes life into a cup of coffee.
7. Coffee Machine
We love our coffee on the HubSpot Blog, so here’s another. In this case, the animation doesn’t steal focus. Rather, it enhances the design around it to make the whole element feel more immersive. It’s something users will just barely notice but appreciate regardless.
8. Button Wiggle
Need to draw a user to a CTA? In place of a color flash or a modal, consider adding a quirky wiggle effect to a button like this one. I like that this effect can capture attention without seeming invasive or significantly disrupting the visitor’s flow. Instead, it’s playful and friendly.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Download Free
All fields are required.
This effect works well for brands that have a fun and playful persona. I would recommend this type of effect for exercise classes, pet services, or other high-energy businesses.
9. Pacman
The Pacman example below is a classic CSS animation that shows our favourite hungry character eating dots. I don’t recommend placing this one on your site for the risk of copyright infringement, but it’s fun to watch. Recreating this animation is also a great way to practice your CSS skills.
10. Three Dots Loading
If you’re looking for an animation with practical applications, this set of pulsing dots can be used on any business website. This is another CSS animation loading effect that many of us are familiar with. A simple scale change is all that’s needed to say, “Just a moment, please.”
11. Never-ending Box
Like Sisyphus’ boulder, the box in this CSS animation attempts to climb a slope, only to fall back down and start the process again. I can see this being used as a loading animation — imagine how satisfying it would be if the animation ended with the box toppling over the other side when the page loaded.
12. Skeleton Loading With Minimal CSS
One useful trick I learned when building UI components was how to handle content that’s still loading.
This demo shows how to do that using a few CSS lines. It sets up two cards: one fully loaded with an image and text, and the other showing placeholders where content will eventually appear.
13. Ants on a Sugar Cube
If you’re not a fan of bugs, I won’t be offended if you skip this one. It’s a clever implementation of animation on the left, bottom, and transform properties. All the keyframes are doing is changing the location of each “ant” SVG element.
14. All-CSS Toggle Switch
If you’re looking for a quick way to build a toggle without JavaScript, this CodePen shows how to do it entirely with CSS.
The example uses a hidden checkbox as the switch’s state, and a <label> as the visual toggle. When you click the label, it toggles the checkbox behind the scenes, no JS needed. What’s great here is how simple and reusable this is. You can drop it into any layout, style it further, or even use it as a base for dark/light mode toggles.
15. Only CSS Hamburger Menu
Here’s how to build a responsive hamburger menu without writing JavaScript.
This CodePen uses a hidden checkbox input to track the toggle state, while a <label> acts as the clickable menu button.
It’s clean, lightweight, and flexible. You can easily style it to fit your brand or plug it into any static site or framework component.
16. Animated Title Text on Hover
Olivia Ng’s “Hover Effect for Headers” example explores several ways to add dynamism to the title text. It shows how just a couple of keyframes can elevate your headings. I like how the slight movement catches my attention. I did a double-take and asked, “Wait, did I make the heading jiggle?”
17. Minimal Cat
I like that this example makes clever use of negative space combined with some well-timed CSS animations. It’s a simple design that conveys a lot of personality with the CSS transform property alone. This cat animation shows that simple can be better.
18. Pure CSS Accordion Menu
Here, the menu items use anchor links and the :target pseudo-class.
Each segment is enclosed in a <li> with a distinct id, and clicking on a menu button (<a href=“#mn1”>) selects the desired item. The .submenu expands by increasing the max-height via a transition when targeted.
19. A CSS-only Carousel Slider
I like how this CodePen teaches you to build a fully functional image carousel using HTML and CSS. Each slide is represented by a <li> inside an ordered list. Navigation between slides is done with anchor links that target specific slide IDs (like #carousel__slide2). The scroll-snap-type property ensures that slides snap into view smoothly as you scroll, while transitions and media queries take care of the animation and accessibility.
The magic happens with the .carousel__snapper element inside each slide. On hover-capable devices, it uses CSS @keyframes to animate to the next slide every few seconds. The animation pauses when you hover or focus on the carousel, giving users full control.
20. HTML/CSS-only Tabs With Slider Animation
I love making tab components, and this CodePen shows how to create interactive tabbed content using HTML and CSS.
It works by pairing <input type=“radio”> elements with <label>s, which act as clickable tab headers. When a radio input is selected, its corresponding content panel is revealed using the adjacent sibling selector. Only one tab can be active at a time thanks to the shared name=“t” attribute across all radio inputs.
21. Candles
I love this brilliant example of how CSS animations can tell a story. You’ll likely need a lot of practice to pull something like this off, but it’s sure to stick out to those visiting your site for the first time.
22. Speedy Truck
Chris Johnson’s “Speedy Truck” makes smart use of parallax to simulate a truck’s drive through a natural setting. While minimal in appearance, this pen packs in details with several creative uses of the transform property — there’s even a little bump in the road.
I love how this animation uses opacity to add trees and mountains to the background.
23. Snow Globe
The coziest example I could find, this snow globe animation adds an ambience to your page that you won’t get with a still image. Notice how the snow animates only within the confines of the “glass” globe. It looks like a seamless GIF, but it’s entirely built with code. I can see this animation being popular during the festive end of the year.
Other CSS Animation Examples
Here are some more real-world CSS animation examples that don’t use keyframes (or use them very minimally). Instead, they leverage other, more complex techniques to achieve the effect.
24. Floating Image
The “floating” effect is a subtle, simple, and effective use of animation. In this case, it’s used to display an icon. Note that the icon has a shadow behind it that also gently bounces, adding depth to the image.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Download Free
All fields are required.
25. CSS Typing Animation
This example guides you on how to create a typewriter-style effect with HTML and CSS, with a touch of JavaScript added to re-trigger the effect.
The animation focuses on the <span class=“type-animation”> element within the header. It begins with a width of zero and progressively expands to expose each letter, much like typing one character at a time. The width changes are handled using a @keyframes animation that tracks progress based on the number of characters.
Users can rerun the animation by clicking the “Retype” button below the heading.
26. Responsive Parallax Drag-Slider With Transparent Letters
Here, we combine parallax effects, drag-based navigation, and text masking to create a slider with HTML, SCSS, and JavaScript.
Slides are dynamically generated in JavaScript based on an array of city names. You can add or remove cities simply by modifying that array.
27. Rotating Text
Okay, this example is cheating a bit since it uses JavaScript. However, imagine this on a homepage. Its transitions are incredibly smooth, and I have the option to customize which effects I use to transition between different words.
28. Opening Envelope
One of my favourite CSS animation examples, this elegant animation pays close attention to detail. From the downward movement as the envelope opens to the details on the paper to the shadow underneath, it’s clear how small touches add up to one smooth, coherent animation. This would make a great button or scroll animation.
29. Number Counter Animation (pure CSS)
This CodePen shows how to animate a number increasing from 0 to 100 using only CSS.
The trick is built around the @property rule, which allows you to animate custom CSS properties. By defining it as an <integer>, the browser can interpret it correctly for use with counter-reset.
This is a modern way to show dynamic values like scores, percentages, or stats, without needing JavaScript to manipulate the DOM.
Note: @property is supported in most modern browsers, but not all. So, check compatibility if you plan to use this in production.
30. Direction-aware 3D Hover Effect
This cool hover effect that follows the user’s mouse creates a 3D animated effect from the top, right, bottom, or left, depending on how you enter and exit each tile.
This creates a UI that is direction-sensitive and feels responsive. It’s great for interactive portfolios, image galleries, or any UI where you’d like hover details to feel dynamic and context-aware.
One Final Example
As I’ve explored in this post, even a small touch of CSS animation can transform a website into a more immersive and engaging experience for visitors. The best animations enhance the content and user experience without feeling distracting or gimmicky — something all the examples I’ve shared achieve beautifully.
That said, I couldn’t resist including one last CSS animation example that truly amazed me. This “Watch Tower” animation pushes the boundaries of what’s possible with just CSS and HTML. While it’s more complex than what I covered above, it’s a stunning reminder of the creative potential of these technologies when used skillfully.
There are multiple elements that move, from clouds in the sky to birds zooming by. The different trees at various opacities behind the watch tower create depth. Everything comes together as one piece of art made entirely with code.
Bringing CSS Animations to Life
CSS animations are a powerful tool. I often use CSS animations on my projects to create many interactions. The examples I’ve shown demonstrate how creativity and technical skill can work together to create something memorable.
Whether you’re starting or an experienced developer, I hope I inspired you to experiment with CSS animations and push the boundaries. Check out the creators’ CodePens for more and start piecing ideas together for yourself.
The best animations improve your content without overwhelming it, so keep having fun while creating.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Download Free
All fields are required.
CSS Animation
