An Event Apart: Putting Your UI in Motion With CSS

by Luke Wroblewski March 31, 2014

In her Putting Your UI in Motion With CSS talk at An Event Apart in Seattle WA 2014, Val Head talked about the potential of CSS animations and how to use them effectively on the Web. Here are my notes from her talk:

  • There used to be a trade-off between Flash (animations) and Websites (none). There was nothing in the middle.
  • Transitions, transforms, and animations: why do we have three different things to move stuff around.
  • Transforms can reposition things, scale them, rotate them, skew them in three dimensions and more. That's a lot of power.
  • Transitions move things over time: set a beginning state and ending state and move things between them.
  • Animations can go from more than point a to b. You can add as many keyframes as you like.

Animation As Utility

  • Animation can be used as a utility not just a way to fluff things up.
  • Establish location: a subtle transition can show where things are positioned in an interface. Slide or flip animations let people know where specific elements in a user interface exist.
  • Describe how content relates to each other: transition between images or sets of content using transitions.
  • Guide tasks: provide feedback on what you have done and what you can do next. Example: slide items in and out of a list. Provide feedback on what is possible in an interface.
  • Demonstrate: we can say a lot with a little bit of animation. Instead of lots of words, a simple animation can explain how things work.
  • Animation can take over your visual hierarchy instantly. You can't not look at things in motion. This can be used for good or evil.

Animation Tips

  • Don't be inflexible: once in a transition, don't block changes from user action. Its often easier to code things in an inflexible manner than a flexible one. But things can happen during a transition.
  • Don't create obstacles. For example menus that animate into modal states (Square). This creates a barrier to use.
  • Test your ideas in context. Test your ideas early. Get things animating early so you can see how it works.
  • Adobe Edge Animate and Tumult Hype are tools that will help you prototype some ideas quickly (without code).
  • Don't be slow: UI animations should be as fast as they can while still being readable.
  • Context matters more than magic numbers for animation speed. Fading between very different colors should take longer than transitioning between two simialr colors.
  • One thing to always do: match your animation to your message. As soon as you make something move, its saying something. Be responsible for what its saying.
  • CSS and Javascript work really well together to create animations.
  • Trigger transitions on clicks or randomize them with Javascript by changing styles on elements.
  • CSS animations can't change their keyframes once they are started but they do report events on what they are doing and how long it took. Though we can;t change keyframes, we can be pretty aware of what is going on.