We’re kind of in a golden age for web animations at the moment. Not only are CSS animations and transitions supported by all major browsers, but the tools we use to create them are getting really powerful. We can control how our animations work to a very fine degree, which can help us bring our sites to life and give them a character all of their own.
Of course, you can over-use animations – no doubt about that. But given that cool CSS animations can draw attention, improve usability, and simply make your site more fun, I think it’s fair to say that you can under use them, too.
So, here are 10 cool CSS animations you can use on your site. For some of these I’ve presented a few different options, so you can pick the one that’s best for you. It’s also a great learning experience to look at other people’s CSS, to see how they created their animations.
Let’s begin!
1) Wiggling buttons to catch people’s attention
Don’t fall into the trap of thinking animation are there just to create pleasing visual effects.
Of course – you can use them just for aesthetics if you want! But animations can also have important functional uses. For example, to draw the visitor’s attention towards the parts of the site you’d like them to look at. A simple, but highly effective way of doing that, is to make elements wiggle slightly, as shown here:
This simply uses transform: rotateZ() with @keyframes to create these wiggles. You might want to put a little pause into the animation, so that it wiggles every 5 seconds or so, rather than being on an infinite loop.
Check also these beutiful CSS page transitions. It’s a great and subtle way to add transitions to a page while loading the new content.
2) CSS hover animations for buttons
A very common use of animations is to indicate when a user has hovered or focused on an element.
This is great from a UI perspective because it helps the user know where they are, and it also helps indicate which parts of your site are interactive, since elements that respond to your mouse usually are.
On top of that, it’s just fun to have a page that reacts to you! If you want a really cool way to animate your CSS buttons on-hover, check out some of these ideas:
Nothing catches your eye? How about some of these?
Still haven’t found anything? OK, you’re quite hard to please! How about this animated gradient effect?
The way this has been done is also quite clever. The gradient is larger than its containing element, and it’s being moved with background-position. The neon effect was achieved with filter: blur() – note that CSS filter effects can cause a performance hit, so if you’re worried about that, just remove the filter property – it still looks good without the blur, and you might even prefer it that way.
3) CSS loading animations
As developers, we try to minimise the time our visitors spend waiting as much as possible. We optimise our images, use lazy load, maybe we even use a CDN. But sometimes, a little loading time is unavoidable. In fact, if we’re connecting to third-party APIs, then part of our load time is be out of our hands completely.
In these cases, it’s crucial that the user knows something is happening. Have you ever clicked a “Submit” button and the page just sits there, doing nothing? It’s a little anxiety provoking, isn’t it? Is the page loading? Is it not? Should I click again? Argh!
So, we need to give the visitor an indication that some processing is going on – and one of the simplest ways to do that is with the classic CSS loading animation made of dots:
The key advantage of this is that it’s cheap, performance-wise. It won’t slow the browser down during a time when it probably has other things to do. On top of that, it’s easy to understand – everybody knows what this means.
If you want to try something a little fancier than the standard CSS loading animation with dots, check out some of these options:
Note: if you are able to measure how much of the process/download has been completed, you might consider using a CSS progress bar instead. Check our article on how to make a CSS progress bar for more information or this one with 20+ great animated progress bars.
4) Animated CSS hamburger menu
The three-line hamburger icon has become the standard way to indicate that a user can access a menu. You click the hamburger, and the menu opens up. Then the hamburger becomes an “X”, which people can use to close the menu.
There’s a reason this is standard practice now – everyone knows what it means, it takes up less space than writing “Menu” in text, and of course, it gives you a great opportunity to use some cool CSS animations!
Have a look at some of these options:
Which one do you think would work best on your site?
Check out our list of 10+ Hamburger Menu Examples if you are interested in more!
5) CSS Animated menus
Of course, when someone clicks that hamburger, you also have to make the menu appear, which is another great time to use some cool CSS animations. The classic option, and one that’s totally decent, is to have the menu slide in from the side:
This will work perfectly for most situations. But, you can get a little fancier if you want…
6) Animated CSS modal popup
Do you have any modal CSS or pop-ups on your site? Maybe for an email sign up form, embedded content, or part of your checkout process?
If you do, it’s time to move past the tired old fade in, fade out. There’s so much more you can do with your modals! Try one of these awesome ideas instead:
By the way, even if you don’t use CSS modals popups on your site, you must checkout the “Bond” option below. It’s awesome – both how it appears, and how it disappears!
7) CSS text animations you can use in your headers
CSS text animations are certainly not something you’ll want to over use. People don’t expect text to move, so if too much of it does move, it might be a bit overwhelming.
However, used sparingly, Scroll text animations can be a fun way to draw your users eye to a particular header, tagline, or call to action on your site.
Have a look through these great options, for example:
Or if you want to get really flashy…
8) Animated 404 pages
Your custom 404 page is the perfect opportunity to pull all your cool CSS animation tricks out of the bag. There’s nothing your user can do here except realise that the page they wanted wasn’t found, and then either go back or move on to another part of your site. So why not give them something to smile at while they are there?
This lost in space animation is very cute, and ties in nicely with what the user is going through at the time:
Or if you want a fun, slightly retro look, maybe this this:
If your brand isn’t as playful as these options suggests, how about some gently floating hexagons? This would be great for a technology or science site. Nothing says “Science” like hexagons!
9) SVG images that draw themselves
Check out this awesome animation of the monkey below:
Pretty cool isn’t it? What’s even cooler is that this image is an SVG – so it’s defined in the HTML code. That means you can take any SVG path (the d property in the path element), plug it into this code, and your shape will draw itself, just like the monkey is doing here! For example, let’s try it with a simple triangle:
See what I mean?
This could be a cool way to show a signature on screen. Or, the monkey image or another more complex animation would work great as a loading image or on a 404 page.
10) Animated CSS forms
Make sure you style your forms! There’s nothing worse than seeing a web form with default styles applied to it!
Well OK, maybe there are some things worse than that – like war, famine, and pizza with pineapples on it. But you get my point – make sure your forms look as good as the rest of your site.
And while you’re doing that, why not add some cool CSS animations in there too? It’s possible to do this in a classy way that won’t be too distracting to your visitors. For example, how about this idea?:
If you’d prefer to keep a full border around your input boxes, you might prefer the option below. I love how the header moves outside the input box when you click inside it:
Time to get started!
Whew! We covered a lot of ground there! But I hope you got some useful examples of cool CSS animations to use on your site, or at least some inspiration.
Of course, it will take a little time to modify and integrate these ideas into your site – what if you don’t have time for all that? What if you just want a ready-made, plug and play solution that you can get working right away?
If that sounds like you, then you’ll love fullPage.js. fullPage helps you set up fantastic-looking full page sites, and gives you access to a suite of different animations and transitions that work right out of the box.
It’s blazing fast, easy to set up, and if you’re already using a JS framework like React, or a CMS like WordPress, don’t fret – fullPage will work seamlessly with your existing set up.
Have a look at what fullPage.js can do for you!
