Whether it’s making a button more clickable, adding some flair to a landing page, or entertaining a visitor while a page loads, CSS animations are an effective way to delight viewers on your website.
![Download Now: 50 Code Templates [Free Snippets]](png/34adf7eb-7945-49c4-acb8-f7e177b323e5.png)
In this post, we’ll check out 30 of my favorite successful uses of CSS animation. As someone who spends a lot of time studying websites and how they capture visitors’ attention, I know a good animation when I see one, and I’m stoked to share them with you.
But first, a brief review of the topic at hand ...
How do CSS animations work?
CSS animation is a feature of CSS that allows you to animate a change in one or more style properties of an element. Pure CSS animations require no additional code (e.g. JavaScript) or media (e.g. GIFs) — everything is done with HTML and CSS.
To make a simple CSS animation, you need three things: an HTML element to animate, a CSS rule that binds the animation to this element, and a group of keyframes that defines the styles at the start and end of the animation. You can also add declarations to further customize your animation, like speed and delay.
To demonstrate, here’s a simple example of a CSS animation:
See the Pen CSS Animation Example by HubSpot (@hubspot) on CodePen.
In this CSS keyframes animation, div is the element we’re animating. Looking at the CSS, we see that the animation declarations are associated with the div selector. The most important declaration here is animation-name, which binds the keyframe my-animation to our div element. Below this are several additional declarations that affect the timing and behavior of the animation.
The animation itself is created with a keyframe, indicated by the @keyframes rule. A keyframe defines the animation’s starting state (inside from{ }) and its end state (inside to{ }). The keyframe my-animation changes three style properties of our div: background-color, width, and top. When these three properties are animated at once, it produces a coherent animation.
In our example, we only have one keyframe. Documents with multiple types of animations may have multiple keyframes, each bound to a different element.
CSS Keyframe Animation Examples
Below, we’ve compiled examples ranging from basic interaction effects to works of art (at least according to me). These examples are from CodePen, a website for creating and sharing code snippets in HTML and CSS. If you’re in need of inspiration, CodePen is a great place to help get the creative juices flowing.
We’ll start with examples that use the traditional keyframes 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 — these spinning load icons are one such example. Their meaning is almost universally understood, and they’re light on code as well. This particular example also shows how to achieve a similar effect with a scalable vector graphic.
See the Pen Simple HTML & SVG Loading Spinners by Stephen Delaney (@sdelaney) on CodePen.
View the code here.
2. Simple CSS Loaders
Here are some more loading animations to try out, presented in a handy grid. Each one is smooth and elegant, so you can pick out the ones that most appeal to you.
See the Pen Simple CSS loaders by Jenning (@jenning) on CodePen.
3. Rotating Changing Shapes
Here’s a good example to dissect for practice — notice how each of the transitions applies at different keyframes throughout the animation:
See the Pen CSS Animate by Matthew Dordal (@mdd) on CodePen.
4. Scrolling Text Animation
Another cool way to enhance your text, this code snippet applies a slot-machine-like effect that rotates words in and out of view. This is a common technique on websites that need to convey the versatility of their creations. 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.
View the code here.
5. Animated Submit Button
I always enjoy the small, unexpected delight moments that savvy designers like to sprinkle throughout their web pages. This submit button is a clean, pleasing way to provide visual feedback indicating that an action has been completed, such as a form being submitted.
See the Pen Submit Button pure css animation by Dead Pixel (@dead_pixel) on CodePen.
6. Hot Coffee
The snippet below shows how simple, stripped-back animations can go a long way. In this case, applying CSS animation to translation, scale, and opacity fade adds life to an otherwise basic drawing.
See the Pen Hot Coffee by Zane Wesley (@zanewesley) on CodePen.
View the code here.
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 Hot Coffee by Zane Wesley (@zanewesley) on CodePen.
View the code here.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
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.
See the Pen Save button wiggle by Donovan Hutchinson (@donovanh) on CodePen.
View the code here.
9. Pacman
I don’t recommend placing this one on your site for risk of copyright infringement, but it’s fun to watch.
See the Pen Pacman by Riccardo (@Ferie) on CodePen.
View the code here.
10. Three Dots Loading
Another instance of CSS animation being used to create a 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.
View the code here.
11. Never-ending Box
Evoking Sisyphus, this animation shows a box continuously trying to climb a slope, only to inevitably fall back down. 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
I think this next example works especially well for design-centric business websites — try animating your color palettes to create a fan-out effect, and change things up from basic colored squares.
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.
See the Pen Toggle Switch with a Hole Handle by Jon Kantner (@jkantner) on CodePen.
View the code here.
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.
See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.
View the code here.
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.
See the Pen Hover Effect for Headers by Olivia Ng (@oliviale) on CodePen.
View the code here.
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.
See the Pen Pure CSS cat animation by Johan Mouchet (@johanmouchet) on CodePen.
View the code here.
18. Growing/Shrinking Bars
CSS animations can help add flair to data visualizations. This example shows how colors and speed can create different feels for dynamic bar graphs — CSS animations let you change the speed and number of repetitions in your animations.
See the Pen Logo playtime by Dan Peddle (@dazld) on CodePen.
View the code here.
19. Twisting Squares
Here’s a deceptively simple 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.
See the Pen Twisty by Mike King (@micjamking) on CodePen.
20. Laser Tag
I’ll say that this is one of the more complex examples in this list. However, it makes for a unique and captivating loading display to hold attention for a brief period.
See the Pen The Glowing Loader - Pure CSS Animation by Maxime Rossignol (@Maxoor) on CodePen.
View the code here.
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.
View the code here.
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.
See the Pen Speedy truck by Tippy Fodder (@tippyfodder) on CodePen.
View the code here.
23. Snow Globe
The coziest example we 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.
See the Pen Christmas Snow Globe Animation by Coding Artist (@Coding-Artist) on CodePen.
View the code here.
Other CSS Animation Examples
Here are some more examples that don’t use keyframes (or use them very minimally) for animations. 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 with excellent results.
See the Pen Floating Animation - CSS by Mario Duarte (@MarioDesigns) on CodePen.
View the code here.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
25. CSS Mouse Hover Transition Effect
This animation shows a simple but effective text highlight effect triggered by a mouseover action. I think it’s a great way to add some extra style to your page links.
See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen.
View the code here.
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 for users that makes navigating your website a tad more enjoyable.
See the Pen Hover-Responsive Logo by Yorick Shan (@yorickshan) on CodePen.
View the code here.
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 you 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 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.
View the code here.
29. File Drawers
To liven up your menus, consider something like the pure CSS file drawers below. Its cabinets open slightly on mouse hover, helping your primary navigation stand out from others.
See the Pen Pure CSS Drawers by Jhey (@jh3y) on CodePen.
View the code here.
30. Astronaut
Here’s another smart use of the floating effect, paired with a friendly out-of-this-world illustration. Yet another instance of a subtle CSS animation effect to enhance the feel of a page element.
See the Pen Pure Css Astronaut Animated by Coding Artist (@Coding-Artist) on CodePen.
View the code here.
One Final Example
As we’ve seen, just a touch of CSS animation can go a very long way in crafting a more immersive experience for your visitors. The best animations serve your content and experience without distracting or appearing gimmicky — all of the above examples strike this balance remarkably well.
However, we couldn’t resist adding one last example that blew us away. This “Watch Tower” example is probably beyond the scope of this piece in its complexity, but it’s also a testament to what CSS and HTML alone can accomplish.
See the Pen Watch Tower Pure CSS Animation by Travis Doughty (@tdoughty) on CodePen.
For more of these awesome vignettes like this one, check out the creator’s CodePen profile and start thinking up ideas for yourself.
![How to Create SVG CSS Animations [+ Examples]](jpg/svg%20css%20animation_12023.jpg)
