CSS Transitions

NOTE: Your browser doesn't support CSS transitions. The demonstrations on this page will work properly, but cannot take advantage of CSS transitions or hardware-accelerated animation.

NOTE: Your browser supports CSS transitions, but not accelerated compositing. The demonstrations on this page will work properly, but cannot take advantage of hardware-accelerated animation.

scripty2 boasts brand-new support for CSS transitions. In browsers that support them, scripty2 will try to animate Effect.Morph effects with CSS transitions instead of DHTML-style animation.

This box has a width of 300px. We can widen it to 600px like this:

$('panel').morph('width: 600px');

Try it.

CSS Transitions

In general, CSS transitions are smoother than JS-driven animations, but not as much as you'd think. To animate this box getting wider, a CSS transition still must re-render the element for each frame of the animation, meaning it must re-calculate its dimensions and those of its descendants and re-flow the text.

Let's morph back to a narrow box so you can see this in action again.

$('panel').morph('width: 300px');

Try it.

CSS Transitions

But another new feature called CSS transforms offers a way around this bottleneck. CSS transforms allow for visual manipulation of an element — scaling, rotating, and translating — without altering the normal layout of the element.

WebKit browsers support both CSS transitions and CSS transforms. In Safari (and MobileSafari), the two features combine to produce hardware-accelerated animation.

Let's demonstrate non-accelerated animation once more by moving this box across the screen in slow-motion.

$('panel').morph('left: 500px;', {
  accelerate: false,
  duration: 3.0
});

Try it.

CSS Transitions

This last animation was different from the first two: it didn't change the dimensions of the box (only its position).

That means scripty2 can animate -webkit-transform instead of animating left and get all the benefits of hardware acceleration. When the animation is done, we'll apply the left style and undo the changes we made to -webkit-transform all at once.

Let's try animating back to where we were — with acceleration turned on.

$('panel').morph('left: 25px;', {
  accelerate: true,
  duration: 3.0
});

Try it.

CSS Transitions

If you're in a browser that supports hardware acceleration, you likely noticed how much smoother this last animation was.

Effects can't always be hardware-accelerated, but scripty2 ensures that each browser — whether mobile or desktop — gets the smoothest animation possible.

Here's a short URL for this page: . Try it on an iPhone or iPad!