How to create impressive animations using Webkit CSS and JavaScript

Hey all. In today’s post I’m going to show you how to create a few simple yet impressive animation effects using WebKit CSS and some JavaScript. Webkit (the rendering engine that powers both Safari and Google Chrome) supports a few advanced animation features which have yet to make their way into FireFox or IE, but it’s really exciting getting to see just what’s capable with it animation-wise. For anyone that enjoyed reading the 3D Wall post, this is going to be a treat.

WebKit animation is especially of interest given that it’s a lot easier to create powerful animations in it using just CSS than with any other browser. It’s also really interesting because Mozilla are pondering switching over to them as their rendering engine of choice. Many of the Webkit-specific animation effects in today’s post can be rendered successfully using either jQuery or plain-JavaScript, but for the sake of simplicity today’s post is going to use the latter.

Quick note: The demos in this article are going to use WebKit for all of the rendering. If you are currently using FireFox or IE and would prefer not to install another browser, here’s a light, portable version of WebKit that I’ve put together than you can download for testing WebKit related projects easily. It’s only around 10mb in size and has been tested with both our demos for today, so feel free to grab it if you need it.

To get started with Webkit animation, let’s take a look at a very simple example of a bounce effect.

A Bounce effect is a relatively easy effect to achieve as all that’s required to get it working is an object, the two points you want to bounce that object between and the code to do the bounce itself. In Webkit, the first thing we do to create a bounce effect is define the range points as follows:

  @-webkit-keyframes bounce {  from {    left: 0px;  }  to {    left: 200px;  } }  

Next, we use a Webkit Keyframes block which defines the styles for the animation and the duration for which the animation lasts:

  div { 

-webkit-animation-name: bounce; 

-webkit-animation-duration: 4s; 

-webkit-animation-iteration-count: 10; 

-webkit-animation-direction: alternate;

}  

The final product we get looks like this. Next, let’s do something a little more advanced using JavaScript.

In the example below (see demo here in Chrome or Safari) you can see a selection of leaves falling down a window which look pretty slick. Even though the entire effect is achieved using JavaScript, it still looks just as good as if it were created using Flash. Note: I haven’t been

The effect itself is initialized by creating a loop for the number of leaves you want to generate and then calling the createLeaf() function as follows:

The initialization step:

function init(){    /* Get a reference to the element that will contain the leaves */    var container = document.getElementById('leafContainer');    /* Fill the empty container with new leaves */    for (var i = 0; i < NUMBER_OF_LEAVES; i++)    {        container.appendChild(createALeaf());    }}

Next, let’s define a function to generate a random number between two ranges for our leaf positioning:

//Receives the lowest and highest values of a range and returns a random 

//integer that falls within that range.function randomInteger(low, high){    return low + Math.floor(Math.random() * (high - low));}

And finally the step to create a new leaf:

function createALeaf(){    /* Start by creating a wrapper div, and an empty img element */     var leafDiv = document.createElement('div');     var image = document.createElement('img');      /* Randomly choose a leaf image and assign it to the newly created element */     image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';      leafDiv.style.top = "-100px";      /* Position the leaf at a random location along the screen */     leafDiv.style.left = pixelValue(randomInteger(0, 500));      /* Randomly choose a spin animation */     var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 

'counterclockwiseSpinAndFlip';
    /* Set the -webkit-animation-name property with these values */     leafDiv.style.webkitAnimationName = 'fade, drop';     image.style.webkitAnimationName = spinAnimationName;      /* Figure out a random duration for the fade and drop animations */     var fadeAndDropDuration = durationValue(randomFloat(5, 11));      /* Figure out another random duration for the spin animation */     var spinDuration = durationValue(randomFloat(4, 8));     /* Set the -webkit-animation-duration property with these values */     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + 

fadeAndDropDuration;
    var leafDelay = durationValue(randomFloat(0, 5));    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
    image.style.webkitAnimationDuration = spinDuration;
    // add the <img> to the <div>     leafDiv.appendChild(image);      /* Return this img element so it can be added to the document */     return leafDiv; }

and that’s it!. Here’s the final product.

It’s also possible to create Webkit animation effects without needing to use any JavaScript at all. You may not have as much control over the effects, but you can still make something that’s equally as effective. Let’s take a look at the Snow-flake effect.

To create this, first let’s define some structure for our snow-flakes and the tree in the backdrop.

<div id="container">

<div id="snow" class="snow">

<!– Draw snowflakes without using images! –>

<div class="snowflake f1">&#10053;</div>

<div class="snowflake f2">&#10052;</div>

<div class="snowflake f3">&#10053;</div>

<div class="snowflake f4">&#10052;</div>

</div>

<div id="ground"></div>

</div>

Next, let’s define the WebKit CSS for the animation effects. These include a fade effect, spin effect and fall effects. The best part about animation in WebKit is that you can easily define powerful effects using simple commands such as from –> to (see fall below). It’s also really simple to add fade effects using just the opacity parameter (see fade).

@-webkit-keyframes fade{

0% { opacity: 0; }

10% { opacity: 0.8; }

100% { opacity: 0; }

}

@-webkit-keyframes fall{

from {top: 10px;}

to {top: 470px;}

}

@-webkit-keyframes accumulate{

from {height: 0px; opacity: 0}

to {height: 20px; opacity: .75;}

}

The spin effect is created by defining a Webkit rotate transformation at a given angle as follows:

@-webkit-keyframes spin{

0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}

100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}

}

Next, we define an animation length for each of the snowflakes as well as initial positioning details as follows:

.snowflake.f1 {

left: 40px;

-webkit-animation-duration: 5s;

/* set duration individually */

}

.snowflake.f2 {

font-size: 1.8em;

left: 120px;

-webkit-animation-duration: 7s;

}

.snowflake.f3 {

left: 200px;

-webkit-animation-duration: 8s;

}

.snowflake.f4 {

font-size: 1.5em;

left: 280px;

-webkit-animation-duration: 6s;

}

Finally, we setup the animation by telling Webkit what effects we want to use, the iteration behaviour for the animation and finally the direction we wish our effects to take.

#snow div {

position: absolute;

top: -40px;

-webkit-animation-name: fall, fade, spin;

-webkit-animation-iteration-count: infinite; /* use 0 to infinite */

-webkit-animation-direction: normal; /* default is normal. use ‘alternate’ to reverse direction */

-webkit-animation-timing-function: ease-in;

}

WebKit transforms and Webkit animation are an amazing step-forward in the progress towards in-browser, flash-less animation and this is definitely an area to watch for the future. I hope this article has given you all a little inspiration for your projects – feel free to let me know what you think in the comments!. Thanks.