An Event Apart: CSS3 Animations

In his Smoke Gets In Your Eyes presentation at An Event Apart in Seattle, WA 2011 Andy Clarke showcased what is possible with CSS3 animations using transitions and transforms in the WebKit browser. Here are my notes from his talk:

People have always been pushing what we can do with our technologies. The best results has always been defined by the limitations of what’s possible.

When we think about CSS transitions we think about edge cases and that support is not there yet. Most people think it they are not that useful now. But we can use CSS3 animations as a part of a progressive enhancement workflow.

Andy illustrated how the CSS3 animation Madmanimation was created using the principle of progressive enhancement. While WebKit browsers render the site as animated movie, other browsers show images and text describing the sequence. These images and text also work on mobile and tablet browsers.

The HTML for an animated CSS movie can be semantically correct mark-up. If we think about it semantically what we should have is a ordered list. Could include content inside each list item that describes each state of an animation. These would be accessible and optimized for SEO. It’s just content. How it is styled, what it looks like, how it moves is secondary.

Design for appropriate capabilities of the screen or device. Through appropriate uses of progressive enhancement, can make something that works across many devices =degrades gracefully.

CSS3 transforms

We can transform or translate an element across x and y axis. We can use combination values as well (x and y). Translate moves things over.

We can rotate something, scale it x and y axis up and down.

We can define the origin of a transform. These can be used to control a transform more tightly.

When applying transforms, they are applied in order.

Any time we translate, rotate, scale, and skew the elements around it don’t know what’s going on.

CSS3 transitions

We can use CSS3 transitions for animations as well. Transitions can be used to make effects feel more real. Can transition backgrounds, borders, and other UI styles.

If you want to transition more than one value, you can separate the values by a comma.

Can also delay transitions by a set of time. Transition timing functions allow you to ease in, out, or make linear transitions.

Animation Tips

Syntax for animations is pretty simple. Every animation needs a minimum of two states. Keyframes can be broken down into percentage keyframes for more steps.

Use background images that are bigger than the canvas.

If you want good performance on iOS devices, you can use three-dimensional transforms. This fools iOS into using hardware acceleration.

You have to include units for rotations (deg).

Animatable is a browser-based tool for creating CSS3 animations with semantic markup available soon!