Whether it’s enhancing a button, killing time during page loads, or adding some extra flair to a landing page, the animation is an effective way to hold attention and delight viewers on your website.
While there are several ways to add animated graphics to a web page, one of the easiest is using CSS animations, which require nothing more than some HTML and CSS know-how to pull off.
![Download Now: 50 Code Templates [Free Snippets]](https://no-cache.hubspot.com/cta/default/53/34adf7eb-7945-49c4-acb8-f7e177b323e5.png)
If you want to add CSS animations to your work, it can be helpful to look at some successful uses of CSS animations first before diving in. This extra bit of research can inspire your own projects and provide a sense of what you can accomplish with this powerful feature.
That’s why we’ve compiled our favorite examples of CSS animation from CodePen — an online tool for creating and sharing code snippets in HTML and CSS — to help get the creative juices flowing.
But first, a brief review of the topic at hand...
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!
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, as well as control various aspects of the animation. Pure CSS animations require no additional code (e.g. JavaScript) or media (e.g. GIFs) — everything is done with HTML and CSS.
CSS animations are great for websites that want to add dynamic, engaging content without placing much more weight on the page. Since they don’t require extra scripts, CSS animations are unlikely to slow down your pages.
To make a CSS animation, you need three things: an HTML element to animate, a CSS rule which 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 Christina Perricone (@hubspot) on CodePen.
In this example, <div></div> is the element we’re animating. Looking at the CSS, we see that our 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 that 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 Animation Examples
Below, we’ve compiled 24 CSS animation examples ranging from basic interaction effects to literal works of art (at least according to me). Feel free to use them for inspiration in your own projects.
1. CSS Mouse Hover Transition Effect
Starting things off light, this animation shows a simple but effective text highlight effect triggered by a mouseover action. It’s a great way to add some extra flair to your page links.
See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen.
View the code here.
2. Simple Loading Spinners
CSS animations can be used to create effects that we’re all familar 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.
3. Scrolling Text Animation
Another cool way to enhance your text, this code snippet applies a slot-machine-like effect which 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.
4. Animated Submit Button
Users appreciate 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.
View the code here.
5. 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 Template: Logo by Alex Katz (@katzkode) on CodePen.
View the code here.
6. 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.
7. Hot Coffee
The snippet below exemplifies how simple animations can go along way. In this case, applying CSS animation to translation, scale, and opacity fade adds life to an otherwise plain drawing.
See the Pen Hot Coffee by Zane Wesley (@zanewesley) on CodePen.
View the code here.
8. Coffee Machine
We love our coffee, so here’s one more. In this instance, the animation doesn’t steal focus. Rather, it enhances to careful design around it to make the whole element feel more immersive.
See the Pen Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner) 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!
9. Button Wiggle
Need to draw a user to a particular action? In lieu of a color flash or a modal, consider adding a quirky wiggle effect to a button. It’s a friendly but effective way to capture attention without seeming invasive or significantly disrupting the visitor’s flow.
See the Pen Save button wiggle by Donovan Hutchinson (@donovanh) on CodePen.
View the code here.
10. Pacman
I don’t recommend placing this one on your site for risk of copyright infringement, but it’s fun to look at regardless.
See the Pen Pacman by Riccardo (@Ferie) on CodePen.
View the code here.
11. Three Dots Loading
Another instance of CSS animations creating 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 Alexey Peterson (@petersonby) on CodePen.
View the code here.
12. 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.
13. Color Fan
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.
View the code here.
14. 3D Toggle Switch
The on/off switch is a staple of UI design. This example puts a three-dimensional spin on the concept, complete with a smooth animation for toggling state. Here, the developer has modified the CSS checkbox input element into something far 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.
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 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. Floating Image
The “floating” effect is a subtle, simple, and effective use of CSS animations. 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.
18. 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.
19. Minimal Cat
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.
20. Growing/Shrinking Bars
CSS can be used to animate visualizations and more effectively communicate your findings. This example demonstrates 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.
21. Laser Tag
I’ll admit this is one of our more complex examples. 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.
22. Candles
Here’s a brilliant example of how CSS animations can tell a story, albeit a short one. 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.
23. Speedy Truck
Chris Johnson’s “Speedy Truck” makes smart use of parallax to simulate a truck’s drive through a natural setting. While minimalist, this pen makes up for it with several creative uses of the transform property — there’s even a little bump in the road.
See the Pen Speedy truck by Chris Johnson (@ChrisJohnson) on CodePen.
View the code here.
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
24. 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.
25. Fireplace Gif
Sticking with the coziness of the snow globe example above, we have a fireplace gif that you can add to your page to further enhance the warmth of your page. In this example, you can see the CSS animation from right to left as the fireplace slides in and comes to a stop once the animation completes.
See the Pen CSS "animation" Slide Right Demo by HubSpot (@hubspot) on CodePen.
One Last 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]](https://blog.hubspot.com/hubfs/Google%20Drive%20Integration/svg%20css%20animation_12023.jpeg)
