I’ve always found it incredibly fun to visit dynamic websites filled with lively and meaningful animations. These animations play a huge role in making a button feel more clickable, adding flair to a landing page, or even entertaining visitors while a page loads. For me, CSS animations are one of the most effective ways to bring a website to life.
![Download Now: 50 Code Templates [Free Snippets]](https://no-cache.hubspot.com/cta/default/53/34adf7eb-7945-49c4-acb8-f7e177b323e5.png)
In this blog post, I’ll share 30 of my favorite websites with CSS animations. As someone who spends a lot of time creating websites, I know a good animation when I see one, and I’m stoked to share them with you.
Let's get into it.
Table of Contents
- How do CSS animations work?
- CSS Animation Examples
- Other CSS Animation Examples
- One Final Example
- Bringing CSS Animations to Life
How do CSS animations work?
An animation is a sequence of images or frames arranged in a systematic order to create a meaningful and engaging design. With CSS, I can animate a change in one or more style properties of an element to create unique movements, transition between pages of my website, and build a visual narrative. The possibilities are endless.
The best part? Pure CSS animations require no additional code (e.g., JavaScript) or media (e.g., GIFs). Everything is done with HTML and CSS.
In order for me to create a CSS animation, here are the three fundamental components I need:
- An HTML element to animate.
- A CSS style rule that binds the animation to the element using the animate property.
- A set of keyframes that define when and where the styles start and end, including any intermediate points of the animation.
Additionally, I can add declarations to further customize my animation using different animation properties, like animation-duration, animation-delay, animation-timing-function, and more.
To demonstrate, here’s a simple CSS animation example:
See the Pen CSS Animation Example by HubSpot (@hubspot) on CodePen.
In this CSS animation example, div is the element I am animating.
In the CSS, you will see that I have bound my animation to the div selector. Inside the animation property, I have the most important declaration, which is animation-name, which binds the keyframe my-animation to my div element. Below this are several additional declarations that affect the timing and behavior of the animation.
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.
The animation itself is defined using the @keyframes rule. Keyframes allow me to specify the animation’s stages. You can use from{} and to{} for simple animations with just a start and end state. However, I’ve used percentages in this example to define multiple stages for more complex behavior.
- At 0%: The div starts on the left (left: 0) with a blue background (background-color: #3498db).
- At 50%: It moves to the right (left: calc(100% - 100px)), changes to red (background-color: #e74c3c), and rotates 180 degrees (transform: rotate(180deg)).
- At 100%: It returns to the left (left: 0), reverts to blue (background-color: #3498db), and completes a full 360-degree rotation (transform: rotate(360deg)).
In this CSS animation example, I only have one keyframe. Documents with multiple types of animations may have multiple keyframes, each bound to a different element.
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.
See the Pen Simple HTML & SVG Loading Spinners by Stephen Delaney (@sdelaney) on CodePen.
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.
See the Pen Simple CSS loaders by Jenning (@jenning) on CodePen.
3. Rotating Changing Shapes
When learning to create my own CSS animations, I started my journey by taking a look at simple examples where shapes morph and change. That’s why I recommend the CSS animation below.
Dissecting how the shape transitions from a circle to a square can help you dissect keyframes. In fact, each transition applies at different keyframes throughout the animation:
See the Pen CSS Animate by Matthew Dordal (@mdd) on CodePen.
4. Scrolling Text Animation
CSS animation is a cool way to enhance your text. That’s why I love this code snippet that applies a slot-machine-like effect, rotating words in and out of view.
I can remember vividly using this CSS animation example on my first-ever portfolio website to convey the versatility of my skills. I could write out the different tech stacks I use — all with flair that makes the experience memorable. Is your product efficient, user-friendly, and sustainable? Plug those words into an animation like this one.
See the Pen Text animation by Yoann (@yoannhel) on CodePen.
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 creating 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.
See the Pen Submit Button pure css animation by Dead Pixel (@dead_pixel) on CodePen.
6. Hot Coffee
CSS animations apply to so much more than simple shapes. The snippet below shows you can add simple, stripped-back animations to a drawing, creating an extra level of engagement. In this case, applying CSS animation to translation, scale, and opacity fade adds life to a cup of coffee.
See the Pen Hot Coffee by Zane Wesley (@zanewesley) on CodePen.
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.
See the Pen Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner) on CodePen.
8. Button Wiggle
Need to draw a user to a CTA? In lieu 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.
See the Pen Save button wiggle by Donovan Hutchinson (@donovanh) on CodePen.
9. Pacman
The Pacman example below is a classic CSS animation that shows our favorite hungry character eating dots. I don’t recommend placing this one on your site for risk of copyright infringement, but it’s fun to watch. Recreating this animation is also a great way to practice your CSS skills.
See the Pen Pacman by Riccardo (@Ferie) on CodePen.
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.”
See the Pen CSS Loader with dots by Aliaksei Peterson (@petersonby) on CodePen.
11. Never-ending Box
Like Sisyphus’ boulder, the box in this CSS animation tries to climb a slope, only to inevitably fall back down and start the process anew. I could see this being used as a loading animation — imagine the animation ending with the box toppling over the other side. So satisfying!
See the Pen Never-ending box by Pawel (@pawelqcm) on CodePen.
12. Color Fan
In the CSS animation below, color swatches appear and fan out, showing the rainbow. I think this example works especially well for design-centric business websites. You can update the colors on the fan to match your business’ branding, giving the animation a personalized touch.
See the Pen Color Palette with Pure CSS Animation by Nitish Khagwal (@nitishkmrk) on CodePen.
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.
See the Pen Ants on Sugar CSS Animation by Stephen Fairbanks (@thathurtabit) on CodePen.
14. 3D Toggle Switch
The toggle switch is a staple of UI design. This example puts a three-dimensional spin on the concept, complete with a smooth animation for the toggling state. Here, the developer has modified the CSS checkbox input element into something more interesting.
I like the use of 3D imagery and how the pill’s color changes as you make the switch.
See the Pen Toggle Switch with a Hole Handle by Jon Kantner (@jkantner) on CodePen.
15. Submarine
CSS works well for flat, colorful illustrations and animations. The code below combines several effects to draw a — quite frankly — adorable submarine. The only change I would suggest is making it yellow to honor the Beatles.
To replicate this example, you need to animate both the bouncing submarine and the bubbles that slide into view.
See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.
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 really catches my attention. I did a double-take and asked, “Wait, did I really make the heading jiggle?”
See the Pen Hover Effect for Headers by Olivia Ng (@oliviale) on CodePen.
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 really shows that simple can be better.
See the Pen Pure CSS cat animation by Johan Mouchet (@johanmouchet) on CodePen.
18. Growing/Shrinking Bars
CSS animations can add flair to data visualizations. In fact, this animating graphs is where I use CSS animation skills most frequently.
This CSS animation example shows how changing colors and speed can elevate (literally and stylistically) a dynamic bar graph. The CSS animations used in the example let you change the speed and number of repetitions in your animations.
See the Pen Logo playtime by Dan Peddle (@dazld) on CodePen.
19. Twisting Squares
Here’s a deceptively simple CSS animation example that creates a trippy effect. The same rotation effect is applied to all the square divs on the page. Their differences in size cause them to rotate at different speeds, creating the illusion.
However, I wouldn’t use this animation as-is on a website. Your visitors may end up staring mesmerized, instead of exploring your full site.
See the Pen Twisty by Mike King (@micjamking) on CodePen.
20. Laser Tag
I’ll say that this is one of the more complex CSS animation examples in this list. However, it makes for a unique and captivating loading display to hold viewers attention for a brief period.
If you have a full loading page, this animation may work for you. If you’re just trying to load a smaller portion of a website, a smaller animation may work better.
See the Pen The Glowing Loader - Pure CSS Animation by Maxime Rossignol (@Maxoor) on CodePen.
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.
See the Pen Funny Candle Pure CSS Animation by Kevin David (@kevin_David_k) on CodePen.
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.
See the Pen Speedy truck by Tippy Fodder (@tippyfodder) on CodePen.
23. Snow Globe
The coziest example I could find, this snow globe animation adds an ambiance 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.
See the Pen Christmas Snow Globe Animation by Coding Artist (@Coding-Artist) on CodePen.
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.
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.
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.
See the Pen Floating Animation - CSS by Mario Duarte (@MarioDesigns) on CodePen.
25. CSS Mouse Hover Transition Effect
This CSS animation example shows a simple but also effective text highlight effect triggered by a mouseover action. I think it’s a great way to add some extra style to my page links. You can also use this effect for a CTA, hyping users up for whatever action they’re going to take.
See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen.
26. Hover-Responsive Logo
Check out the logo in the bottom right corner of the pen below — this animation applies a subtle animation on mouse-hover. It’s another visual cue I use on my website that makes navigating my website a tad more enjoyable for my visitors.
See the Pen Hover-Responsive Logo by Yorick Shan (@yorickshan) on CodePen.
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 you use to transition between different words.
See the Pen Rotating Text by alphardex (@alphardex) on CodePen.
28. Opening Envelope
One of my favorite 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.
See the Pen Animated CSS Mail Button by Jake Giles-Phillips (@jakegilesphillips) on CodePen.
29. File Drawers
To liven up your menus, consider something like the pure CSS file drawers below. Its cabinets open slightly on mouse hover and completely on click, helping your primary navigation stand out from others. This works particularly well if your site caters to the office experience.
See the Pen Pure CSS Drawers ʕノ•ᴥ•ʔノ ︵ ┻━┻ by Jhey (@jh3y) on CodePen.
30. Astronaut
Here’s another smart use of the floating effect, paired with a friendly out-of-this-world illustration. This is another instance of a subtle CSS animation effect that enhances the feel of a page element. I feel like I’m floating too!
See the Pen Pure Css Astronaut Animated by Coding Artist (@Coding-Artist) on CodePen.
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 opacity behind the watch tower create depth. Everything comes together as one piece of art made entirely with code.
See the Pen Watch Tower Pure CSS Animation by Travis Doughty (@tdoughty) on CodePen.
Bringing CSS Animations to Life
CSS animations are a powerful tool — and have been from the beginning of my web development journey to now. I still use CSS animations on my websites, from creating hover effects to intricate keyframe animations. The examples I’ve shared demonstrate how creativity and technical skill can work together to create something truly memorable.
Whether you’re a beginner or an experienced developer, I hope these ideas inspire you to experiment with CSS animations and push the boundaries of what’s possible. For more awesome examples, check out the creator's CodePen profile and start thinking up ideas for yourself.
Remember, the best animations enhance your content without overwhelming it — so have fun, stay curious, and keep creating!
Editor's note: This post was originally published in February 2021 and has been updated for comprehensiveness.
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.
