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.
- That means I need to read Val’s pocket guide book, CSS Animations
Leave a reply