An Introduction to CSS Animation

If you’re working in the field of web development and design, it’s a pretty safe bet to assume you already know what CSS is all about and that you’ve already mastered elements like CSS Transitions and Animations. But, if you’re just starting out, it may just be that the last phrase sounds like complete gibberish to you. Should that be the case, then this is the article for you.

Image source

First of all, we need to cover the basics: what exactly is CSS? Well, CSS stands for Cascading Style Sheet. It first started out in the late ’90s and was meant to let web developers separate content from design in their websites. Basically, it was designed to give HTML its original function back by making it more content-oriented and less focused on design.

A style sheet is a set of standards for the design and writing of a document that has been used in the publishing industry for years and that makes sure that the documents are formatted in exactly the way that they’re intended to be. CSS has pretty much the same role in web page design.

So why cascading? Well, picture a waterfall. Now imagine the content of a website is the water. Style sheets are like the rocks in the waterfall. First, there’s your browser’s default style sheet. It may be tantamount to “text content comes up in Times New Roman size 12 on a white background”. If there’s no other rock below it (that is to say, a personalized style sheet of the website you’re visiting), then this default style sheet is the one that most affects the content.

If, instead, the website has a personalized style sheet, then that takes precedence, much like a rock that’s lower in a waterfall affects the direction the water falls in more than one that’s above it. Now, you can have a style sheet for the whole website and a personalized one for one page on your site. That one takes precedence as over the style sheet your whole website has, and so on.

So why should you care about CSS? Well, it’s become a must-know of the web design industry. It’s like saying you want to be a web developer but not know any HTML. CSS is one of the most powerful tools you, as a web designer, can employ. It can be quickly updated and you can change what’s highlighted or prioritized without making any changes to the site’s XHTML. Simply put, CSS is one of the best design resources out there, and you should take advantage of it.

The upside to CSS is that there’s not that much to learn, tag-wise. There are about 60 properties in CSS Level 1 and 70 in CSS Level 2. Those of us used to learning hundreds of HTML tags and attributes will have no problem in learning these tags.

The downside is that it’s a lot trickier to use, due to a lot of factors. Still, once you start using CSS efficiently, you won’t ever stop.

Image source

CSS animations have been around since late 2006 – early 2007. They’re part of CSS Level 3 and they were great to play with when they first came out, but they weren’t really implemented, as they were supported only by the nightly builds, and most browsers didn’t have support for them. They only became a viable option for use in late 2009, when most people were using powerful browsers that were capable of rending these animations.

So what can you do with them? Well, a lot of things, actually. You can make a basic spinner, for one. What am I talking about? You know those little spinning things that you can see before your video has fully loaded on various video hosting sites? Yeah, one of those. They’re pretty useful to have, if you have content that takes a long time to load.

How did people used to do this? They’d go to a specialized website and pick an animated gif that they’d customize on the website and download it. That doesn’t sound too bad, does it? Unfortunately, that .gif is only semi-transparent and has only a limited number of frames. Well, with CSS animations, you can take your static image with a transparent background and make it spin with only a few lines of code. Here’s where you can learn more about how to make a simple website spinner.

Image source

There’s a bunch of other things you can do with CSS animations. The simplest kinds of animations are called transitions. Basically, when a CSS property changes its value, the page is instantly updated. Transitions override this, instead executing an animation from the old state to the new one.

There’s a lot of stuff you can do with transitions. You can rotate, you can animate, you can superpose, you can make the images pop up and go toward the viewer in 3D style and many other neat tricks. Of course, these aren’t limited to images, you could easily do the same things with a menu, for instance.

The folks over at Surfin’ Safari tell us that what you need to know about transitions before you start trying them out for yourself can be boiled down to two points:

• They’re implicit animations. This means that you can write style sheets and scripts as usual and the animations will happen implicitly should the property values change.
• They degrade well. If a browser can’t play a transition animation, it simply won’t and just update the content instantly instead.

There’s a bunch of tutorials on how to use CSS animate. You can go and check out what the folks at HTMLGoodies have to say on the subject matted. You can check out this simple video tutorial from CSS-Tricks or look at what the Art of Web folks are saying.

Well, we’ve given you a short historic of CSS and of CSS animations and have told you what they’re all about and why you should use them. Do check them out and make sure to let us know where you stand on the topic of CSS Animations and Transitions in the comments section below!