CSS animations and how to use them
CSS animations are cropping up everywhere. It seems as though every website you visit has some cool
effect happening when you’re scrolling down the page or hovering your mouse over the logo. No matter what kind of
business or website it is, there’s always an opportunity to add a CSS animation in for some added wow-factor. And you
know what—adding these little bits of style to your website doesn’t have to be difficult! In fact, you can even get
them already written for you.
However, there is an art to picking the right CSS animation for your project. If you’re building a website for a
hospital you’ll definitely have different requirements from a children's after-school club. Use code that’s
relevant to your project: it’s easy to add 20 different animations to the site and just change the class of
an element so that a specific animation targets it. But adding irrelevant code can seriously slow down your website
and impact other areas too. Plus, we don’t really need to tell you that a spinning logo can look great if you’re
creating a website for a children’s entertainer… But not so great if it’s for a law firm.
But don’t worry—we can help. Browse through categories and subcategories and get some
inspiration—there’s plenty to see! And want to know something really great about CSS animations? They’re cross-browser
friendly. CSS works on all web browsers, big or small. There is no risk of the code not appearing
properly—provided you use a couple of tricks to make sure Internet Explorer plays ball ;)
So why should you use CSS animations? Quite simply, they add a little more to your website than just
changing the color of the font or the text size. Having an element of the interface fade in to suggest the beginning
of a process, or adding color to an image when the mouse is hovered over, can have a huge impact on a user’s
experience of the website. All this also contributes to communicating your brand through style and look.
Tuts+ contributor Andrew Blackman has highlighted a number of
popular courses on CSS
animation. This is a great resource if you want to learn how to do it yourself and have a little time to spare
to go through this awesome list. However, if you’re just looking for a quick fix or something that’s been
quality checked, then you’re in the right place—we have a huge selection of CSS animation snippets ready to
Dive deeper into CSS.
You shouldn’t just stop there. If you’re keen on learning a little more about CSS and building your own website, then
why not read one of the CSS tutorials available and start
showing off your skills? You could even submit something to CodeCanyon and start earning your own money from a CSS
snippet that people need!