Skip to content

An Event Apart: Putting UI’s in Motion

CSS Animations - Val Head

At An Event Apart – Austin 2013, Val Head shared with us her knowledge of CSS animations. Here are my take-aways:

  • A few animation concepts to remember – all of which are CSS ‘easing’ options:
    • slow in / slow out – gives an organic/natural feel
    • follow through – where object will go past end point and come back – also a natural easing option
    • anticipation – where object winds up or sling shots into motion – this is opposite of ‘follow through’
    • cubic-bezier – where the object’s easing can be keyframed any which way you would like
      • Ceaser tool for easily creating these keyframes
      • You can use the same keyframes with different animations for different results
    • squash/stretch
    • arc – moves in Z-space (feels 3-d)
  • Where are the best places to add animation?
    • When hiding or revealing content
    • For subtle cues or clues
    • For demonstrations of products or services
    • For surprise and/or delight
  • 2 Deadly Sins!
    • Don’t require user to wait for transition/animation if they make a mistake
    • Don’t make your animations too slow. If you are wondering if your animation is too slow, it probably is.
  • Swapping classes with JavaScript is powerful when used with CSS to add animation – especially for play/pause of animation.
  • If your animations or transitions include critical content, be careful and always test it on devices/browsers.
  • My biggest take-away was that I haven’t been really taking advantage of CSS Animations.

Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *