With the winds changing with regards to the languages used within web design and development these days with the embracement of HTML5 and CSS3 there are a lot of trends I can see appearing over the web. This article is about one of them….CSS3 Animations.

Firstly let me just say I am fully in awe of the people who use CSS3 animations and make it do fantastic things as I haven’t meddled with it as of yet but from surfing the web this is just my opinion on what I have seen.

I wont name names when going through this article because I don’t think that is fair and I know I wouldn’t want to be singled out if it was me that was the culprit. We have all seen them out there sites with lovely moving images of flying dinosaurs, moving clouds and even a snorkelling goat…So we can all relate to what I am going to be discussing through out this article.

Photo Credit: Depositphotos.com

When to use CSS3 Animations

I believe that the best time to use CSS3 animations would be on a holding page or even just a page that would only need one page to put across what the site is for and its purpose.  The main thing being the latter of that sentence, basically meaning that there is no point in having a site is the people using it don’t know what it is for or about content has been and always will be king when it comes to websites.

Recently a friend of mine pointed out a site to me which sparked this article where they were advertising an event, upon looking at the website I was amazed by the CSS3 animations and what they had made it do if you clicked on certain buttons etc. but I would be lying if I said I knew what the event the site was for was about.

Which brings me onto the next part….

When to NOT use CSS3 Animations

If your website needs more than one page to tell the end-user about your company, what you do, where you are based, examples of your work…..don’t use extravagant CSS3 animations on your site as these will become annoying to the end-user if they are indeed across all pages, or in the worst case it will not be uniform across the whole site making the home page stand out against the rest of the pages by looking completely different which from an end users point of view is never good.

I think back to when I was learning IT in secondary school and being reminded constantly by my teacher of the rock group KISS, which I was slightly less enthused about when I learned it wasn’t a reference to the rock group but an anagram of “Keep It Simple Stupid”. This has stayed with me my entire life always thinking that simple designs look cleaner and generally last longer on the web without looking dated.


Basically in conclusion to this rather brief article about CSS3 animations I think that if you have a one page (almost a poster) for a website go for it make it as spectacular as you can, but always make sure you have the content on there to let the end-user know what the site is about. Then if when you have weighed up the amount of information needed think about toning down the animation to accommodate this and I’m sure you will find a happy middle.

Did you enjoy this article? We would love to hear your thoughts, so don’t be shy and comment below! Please don’t forget to subscribe to our RSS-feed or follow Inspirationfeed on TwitterGoogle+ and Facebook! If you enjoyed the following article we humbly ask you to comment, and help us spread the word!

Posted by Harry Wiseman

Harry is a student currently studying for a BSc (Hons) Web Technologies at University of Portsmouth. Hoping to get a First class degree at the end of it currently on route for a 2:1. He is an experienced PHP developer, Front End Developer, with a range of other skills.

Leave a reply

Your email address will not be published. Required fields are marked *