An Event Apart: CSS3 Animations

by Luke Wroblewski December 12, 2011

In his Smoke Gets In Your Eyes presentation at An Event Apart in San Francisco, CA 2011 Andy Clarke showcased what is possible with CSS3 animations using transitions and transforms in the Web 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. Rudimentary tools can push us to be very creative.
  • When we think about CSS transitions we think about edge cases and that support (currently in some versions of WebKit, Firefox, IE10) is not there yet. Most people think CSS animations they are not that useful now. But we can use CSS3 animations as a part of a progressive enhancement workflow today.
  • Andy illustrated how the CSS3 animation Madmanimation was created using the principle of progressive enhancement. While CSS3-capable browsers render the site as an 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.
  • 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

  • Many CSS3 animations fall prey to divots -where the entire markup is just a bunch of useless DIV elements. This is markup abuse and needs to stop. Mark-up is the most important element in our sites. We have to treat it well.
  • So instead, set up an 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. This text is an opportunity for storytelling and matches the semantic structure of an animation -a sequence, an order list.
  • Don;t start with the visuals and animation. Start with the content first and enhance out.
  • 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. The experience will be different on different browsers but that's ok. You're designing for the capabilities of the browser -it's pure progressive enhancement.
  • Animate.css is a set of simple plug and play CSS animations