2) CSS hover animations for buttonsĪ very common use of animations is to indicate when a user has hovered or focused on an element. It's a great and subtle way to add transitions to a page while loading the new content.

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.Ĭheck also these beutiful CSS page transitions. This simply uses transform: rotateZ() with to create these wiggles. A simple, but highly effective way of doing that, is to make elements wiggle slightly, as shown here: For example, to draw the visitor's attention towards the parts of the site you'd like them to look at. Of course - you can use them just for aesthetics if you want! But animations can also have important functional uses. Let's begin! 1) Wiggling buttons to catch people's attentionĭon't fall into the trap of thinking animation are there just to create pleasing visual effects. It's also a great learning experience to look at other people's CSS, to see how they created their animations. For some of these I've presented a few different options, so you can pick the one that's best for you. So, here are 10 cool CSS animations you can use on your site. 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. Of course, you can over-use animations - no doubt about that.

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. 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're kind of in a golden age for web animations at the moment.

Cool icon gifs