In his Smoke Gets In Your Eyes presentation at An Event Apart in Boston, MA 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. Or you can use the “all” keyword to transition all properties.
- Can transition over a period of time as well by setting duration.
- Also can delay transitions by a set of time. Transition timing functions allow you to ease in, out, or make linear transitions.
- Transitions can be combined together to create complex effect
- CSS shorthand allows you compile all values in a single declaration.
Animation Tips
- Syntax for animations is pretty simple. Every animation needs a minimum of two states. You can go from something to something else (a different state). 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. Just take a regular value and add an extra z unit at the end. But Mozilla does not support 3d transforms so you need to include 2d transforms alongside 3d transforms.
- You have to include units for rotations (deg).
- Animatable is a browser-based tool for creating CSS3 animations with semantic markup available soon!
Making it Accessible
- Set up the animation as an ordered list. Then add descriptive paragraphs inside each element in the list that details what is happening in each scene of the animation.
- We can use modernizer to create append animation elements to the DOM if animations are supported.
- For everyone else, we can display text and images to convey the story inside the animation.
- We can strive for the best technologies because we are thinking about the fallback experience. How to make this accessible across devices.
- In order to help people create CCS animations, Andy has created Animatable: a browser-based tool for creating animations using storyboards.