CSS3 Transitions Created Dynamically with JavaScript

For mobile devices CSS3 transitions and key frame animations are the best way to implement animation. They efficient and fast and be implemented with almost no JavaScript. At CSS3Wizardy I’ve been blogging about how to implement various user interactions and controls for mobile Webkit using CSS3. Most of these are triggered by just the addition or removal of a class.

As of version 1.0.7, ChocolateChip offers a way to create dynamic CSS3 transitions. It does this through the Element.anim() method. This takes three parameters: a object literal of CSS3 properties/values to animate, the duration, and the easing. Here’s an example:

$("#animate").bind("click", function() {
    this.anim({"-webkit-transform": "rotate3d(30, 150, 200, 180deg) scale(3) translate3d(-50%, -30%, 140%)", "opacity": .25, "-webkit-transform-style" : "preserve-3d", "-webkit-perspective": 500}, 2, "ease-in-out");
});

If you have animations needs beyond what CSS3 transitions or key frame animations can deliver, you might want to look into the excellent JavaScript framework by Thomas Fuchs: Émile. It’s just fifty lines of code, not more than 1k in size. And it does everything that the big frameworks do for animation. Thomas Fuchs, the author of the famous Script.aculo.us JavaScript animation framework for Prototype, created Émile for speed and small foot print. Be aware that if you are doing this for mobile deployment, trying to animate many things on the screen can tax the mobile device’s process and consume valuable memory, leading to data corruption and freezes or crashes. Animate the least as possible.

Advertisements