How it works

The basic pattern for all of the above mentioned animations is the following:

1. In CSS, tell WebKit that, for an element or group of elements, when a specific property changes, it should transition from one state to another over a set duration and using a particular timing function (also called an “easing algorithm”).
2. Also in CSS, set the initial state of the element and the state to which the element is to transition.
3. Either in CSS (using the :hover pseudo-class) or in JavaScript (by toggling a class name), initiate the transition by setting a new state for the property in question.

Here’s a simple example. First, the CSS:

#mydiv {

  -webkit-transition-property: opacity;

  -webkit-transition-duration: 1500ms;

  -webkit-transition-timing-function: ease;

  opacity: 1.0;

}

#mydiv.faded {

  opacity: 0.0;

}

The CSS just implements steps 1 & 2 above.

Next, the JavaScript:

document

  .getElementById('mydiv')

  .addEventListener('click', function () {

  this.className = 'faded' === this.className ? '' : 'faded';

}, false);

The above code sets up our DIV to listen for click events. When you click the DIV, it checks whether the class name is ‘faded’. If it is, it sets the class name to nothing. If it’s not, it sets it to ‘faded’. Try it for yourself:

Pretty cool, eh? Read everything there is to know about this stuff in the official documentation from Apple.

Bonus!

As promised, here is a little bonus technique: key-framed animations. This is sweet. First, try the example below:

In a WebKit-based browser, you should see the DIV grow to about twice it’s “normal” size, then pop back to actual size. The code for this animation is only a little more complex than the previous example, and it builds on what we already know.

Here’s the CSS:

@-webkit-keyframes pop {

  0%   { -webkit-transform: scale(0.5); }

  70%  { -webkit-transform: scale(2.0); }

  100% { -webkit-transform: scale(1.0); }

}

#popper {

  -webkit-transform: scale(0.5);

}

#popper.popping {

  -webkit-transform: scale(1.0);

  -webkit-animation-name: pop;

  -webkit-animation-duration: 250ms;

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

}

In the CSS, the first thing we’re doing is creating an animation (@-webkit-keyframes) with the name “pop”. Our animation has three states: 0%, our starting state; 70%, the state we want our element in when 70% of the duration has elapsed; and, 100%, our ending state.

Next, we set the initial state for the element to be scaled down to 50% of “actual” size (-webkit-transform: scale(0.5);) and declare that when the class “popping” is added to the element we will use the “pop” animation sequence to transition to our ending state (-webkit-transform: scale(1.0);) over 250 milliseconds and using the ease-in-out timing function.

The JavaScript is essentially the same as before. Only the DIV ID and class names have been changed.

document

  .getElementById('popper')

  .addEventListener('click', function () {

  this.className = 'popping' === this.className ? '' : 'popping';

}, false);

So, that’s it. Pretty cool what WebKit can do. I mentioned earlier that other browsers will hopefully implement these techniques as well. Apple have proposed all of the techniques I’ve used in my examples to the appropriate standards bodies. My guess is Mozilla and Opera will get on board relatively quickly. When The Beast decides to grow a round tuit is anyone’s guess. IE12, perhaps?