Not long ago, in a land where Cascading Style Sheets were just landing on the pages of web designers everywhere, no-one would have ever thought that little old CSS would grow up big enough to handle its own animations. Welcome to the now. Well, actually, CSS animation has been around for a while, but wide range support is now starting to flourish. Today, we’ll build a “splash screen” of sorts, with a rotating spinner to let a visitor know that our site is loading. Normally, this could be done by going and grabbing one of the ten-bazillion .gif loading images off of the internet and slapping it on your web page, but that poses a multitude of problems. The main problem being that a .gif image has to have the background color set, so if we changed the background of our website, we’d have to go back and make sure our .gif image was changed to suit the new design. Using CSS transitions, we can recreate the loading effect in a more manageable, customizable way.
Let’s get started!

NOTE: This effect only works with WebKit-based browsers; Safari, Mobile Safari or Google Chrome. I’m positive that Mozilla and Opera will catch up with these CSS features.

STEP ONE:

The HTML

This couldn’t be any more simple. All we need is one HTML element that we can attach our image to. Here’s what our brilliant piece of HTML code looks like:

Simple enough right? Next we’ll add a bit of CSS to attach our image to the element, center it in the screen, and make the text inside disappear:

STEP TWO:

The CSS
The most important declaration here is -webkit-mask-image. This is the declaration that makes our image appear on the screen. Webkit-mask-image is overlaying our image onto our paragraph element.

Pretty, awesome stuff right? Let’s make it even more awesome with some animation.

STEP THREE:

The Animation

Our spinner isn’t spinning at all yet, so let’s fix that. When animating in CSS, we need to declare a name for the animation, the duration of the animation, how many times it’s to be repeated, and the style of the animation. We do this with the following properties respectively:

  1. -webkit-animation-name
  2. -webkit-animation-duration
  3. -webkit-animation-iteration-count
  4. -webkit-animation-timing-function

Here’s what our CSS declaration looks like now:

Now that we’ve defined all of the properties of our animation, the last step is to actually make it work. We’ll need to use the @-webkit-keyframes call to run our animation. The full declaration looks like this:

Preview in browser:

We first call the @-webkit-keyframes declaration, and the name of our animation. The “from” statement wants to know where our animation starts, and in our case it is at the original point with no rotation. The “to” statement wants to know where the animation ends, which in this case is once it reaches a full 360 degree rotation. Once it reaches this point, the animation starts again.

The possibilities of the CSS3 animation functionality are absolutely endless. With a bit of creativity, it’s easy to see just how far this can be pushed. As CSS grows, so will its ability to animate elements, and right now is the time to get the hang of using them. Until next time, keep on coding!

Download Source Files