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');

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');

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.

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
});

CSS Transitions

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