Coming to a Screen Near You: CSS3 Animations and The New JavaScript Method Animate()

With CSS3 animations in HTML documents have become fairly easy to achieve. Using the "@keyframes" rule various properties such as position and size of an HTML element get defined. Then the property "animation" cares for getting the keyframes up and running according to their definitions. Without the need for JavaScript and plug-ins we are able to create even complex animations, that run most flawlessly in all modern browsers. Problems occur as soon as you need to get JavaScript to enter the game of creating CSS3 animations. We all know, JavaScript is more often than not unavoidable as we need to calculate individual values or an animation process as a whole.

Combining CSS and JavaScript With The New „animate()“ Method

The new „animate()“ method of JavaScript allows us to control complete animations solely via script. Of course we'll still need to use a bunch of CSS properties to define our keyframes.

document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

In the above example we attach the method „animate()“ to an element. Inside the square brackets we define as many states of a given property as we like - in our example we do so on "height". Each value is written as an object literal, with values for one single property only. Combinations, e.g. width and height together, are not allowed. Note that the actual values need to be surrounded by quotation marks and in JavaScript compliant syntax, that means „backgroundColor“ and not „background-color“. In another object literal, right after the square brackets close, we define the animation further. We will want to control the length of the animation via „duration“, how often it should be repeated via „iteration“ and an optional „delay“, defining, when the animation shall start. All time values are in miliseconds as usual.

Controlling a Set of Keyframes and Their Durations

We have to call the „animate()“ method separately for each individual property we want to change. This means, would we want to manipulate not only the height, but also the width, we have to call „animate()“ again.

document.getElementById("element").animate([
  {width: "0", offset: 0},
  {width: "10%", offset, 1/3},
  {width: "100%", offset: 1}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

In the above example we manipulate the width of the element. The width is intended to change starting from 0, then going to 10 percent and ending at 100 percent, all within a smooth animation process of course. The additional parameter „offset“ defines, how much time each state is supposed to endure. In our example, the animation changing the width from 0 to 10 percent will take up one-third of the time, while the alteration from 10 to 100 percent will get two-thirds. The basis to calculate that is the overall duration of the animation, set by - well -  „duration“. In this case, the part will endure one second, and the second part will take up two seconds. Instead of defining the value in the form of a fraction, you can as well choose to use decimal numbers. The value needs to be in between zero and one, obviously. Correct would also be „0.33“ instead of „1/3“.

More Animation Options

The method „animate()“ is able to steer the motion process just as you are familiar with from the CSS3 property „animation“. That way you are also able to alter the direction as well as the speed of the animation and its acceleration. If you want to define whether to return to the start frame after the animation has ended, do it.

document.getElementById("element").animate([
  …
], {
  duration: 3000,
  iteration: 2,
  delay: 1000,
  direction: "reverse",
  easing: "ease-in",
  fill: "forwards"
});

The value „direction“ contains the direction of the animation. Putting it to „reverse“ leads to the animation playing backwards. Using „alternate“ leads to playing the animation forward, then backward. „alternate-reverse“ combines the last two. Using „easing“ allows you to access the common easing functions already known from CSS3, as there are „ease-in“, „ease-out“ etc. Per default each animation is designed to run linearly without any acceleration and deceleration. The value for „fill“ defines what will be presented after the animation has ended. Per default the starting point will be recalled. Using „forward“ the animation will stop and stay at the last keyframe.

Controlling the Animation

Attaching „animate()“ to a variable allows us to control the animation via JavaScript. We can let it start and stop to our liking.

var animation = document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

document.getElementById("animation_start").addEventListener("click", function() {
  animation.play();
}, false);

document.getElementById("animation_pause").addEventListener("click", function() {
  animation.pause();
}, false);

In our example we attach the animation to the variable „animation“, obviously. Then we attach two event listeners to the elements with the IDs „animation_start“ and „animation_pause“. These listeners will care for running the defined functions on click. „play()“ starts die animation, „pause()“ , you know what, and „reverse()“ changes the direction of the animation to backwards. „finish()“ brings you to the last keyframe immediately and stops the animation completely.

What Next? Event-Listener Handles The End of The Animation

Hey, this is JavaScript. Of course do we have an event listener to enable us to react upon the animation's end. We do that using „finish“. Inside „finish“ we define the respective function.

animation.addEventListener("finish", function() {
  alert("The animation has ended.");
}, false);

In the above example we simply issue a message at animation's end.

Browser Support

„animate()“ is in its early stages and labeled "experimental". It will be supported in Chrome from version 36 onwards. If you want to use it now, install Chrome Canary, Chrome's bleeding edge developer variant. (dpe)