CSS3 Animations: Why they rock for the mainstream, and dont hurt those in the retrostream

What are they?

CSS3 animations are basically animations driven by a website’s stylesheet. These might be something simple like a button moving on a user’s click, a rotating icon, or a left-to-right scrolling background. In the past, these actions were accomplished using either Javascript or a static, 1998-esque, animated gif. Since we’re beyond web 2.0, we have better, easier, and more web-friendly options.

Why use them?

These aren’t full feature animations. Think of them as the aesthetic detail your site needs. A rollover on a button from white to grey is easy enough to understand, but having it fade from white to grey gives it that nice extra touch that a user might only notice on the subconscious level. The animations give the mundane features a nice boost. Another bonus that you might not notice is the performance of your site. Using Javascript or an animated gif are more load intensive than simply using CSS to drive the animation. Plus, Javascript can be disabled at times for security reasons. If your animations run on CSS, then you don’t have to worry about Javascript security being an issue.

Who is using them?

The major tech name companies are front runners of these lovely animation features. Google makes use of them frequently in their Google Doodle, and their Google Fiber page has a fairly extensive animation to illustrate how their product works. Apple uses animations to help users customize their choices for their devices. CNET, a tech blog/media/review site, uses CSS3 animations for extra design appeal with their image and link rollovers. The features on all of these sites don’t necessarily impact the general functionality of the site, but they do make the site more appealing to the eye and enhance the user’s experience in general.

Why aren’t these animations everywhere?

Give it time. For companies that have a frequent upkeep of their site and media, these animations are starting to be used a lot more. However, these are a fairly new part of the CSS and web world. The downside to the animations is that not all users are using the most current browsers (seriously, even large corporations are still in IE6!). IE9 or older does not currently support this animation style. However, in most situations these animations will default to an on/off state. So for example, in Google Chrome, my rollover button fades from black to gray, while in IE9, it simply switches from black to gray immediately on rollover. The button still functions as desired, yet has a nice little aesthetic extra for the up-to-date user to experience. Here, I have created a simple example. Notice the nice transition on rollover from semi-transparent to opaque as well as a size change. If you’re in an up-to-date browser, the animation is there. IE9 users and back, the functionality endgame is still there. The rollover arrives at the intended state no matter the browser you are in, just without the flare if you’re in IE9 or older.

The New Normal

Web design trends change every day. What was popular 5 years ago certainly is not the mindset for today’s modern web-aficionado and most likely when those trends came out, they didn’t work across all browsers either. The smart way to build is to embrace the new trends not only because of their soon-to-be normalcy but simply because they can enhance a site with a minimal effort. The modern user will get to experience these enhancements while our not-so-up-to-date fellows will have to settle for traditional functionality until they install their next browser update.

About the author: Nick Deimler

Nick Deimler is a Front End Web Developer at R2i. He graduated from Drexel University in 2009 with a degree in Digital Media. Nick prides himself on efficiency and his ability to problem solve. On his days off, Nick enjoys playing volleyball as well as bike riding. He also attempts to play guitar though he would not say he can actually play the guitar.

Stay in the loop

Join over 52,000 marketers in staying up-to-date on the latest industry and R2i news.
arc contact image arc contact image

Ready to drive results?

Contact us today to learn how you can create and evolve digital solutions that connect customer experiences for driving unprecedented impact.

Contact Us