CSS Animations Can Make or Break a Site

Topics

CSS Transitions vs CSS Animations

• Transitions have two states, in which an elements transitions from one to the other
  - For example: On hover a button's opacity may transition from completely opaque (opacity: 1;) to translucent (opacity: 0.5;)
• Animations have more options than transitions, most notably they can have more than two states
  - @keyframes to define which properties change and at which stage in the animation
  - Can be defined right down to a % (ie 50% is halfways through the animation)
  - Can also ditch the %s and go more "transition-like" with "to" and "from"
  - There are also more fine controls than transitions like (CSS transitions have some similar properties): animation delay, animation iteration count, animation duration, animation timing

What Makes a Site

• Animation that are subtle, often not really noticeable, but present enough that they enhance the polish and premium feel of a page
  - For example: Fading in on load, fading in on scroll, smooth scrolling, loading indicators that distract from the loading time
• Some animations might be bold and in your face, these too can raise the premium feel of a page, especially if the content calls for it
  - For example: A marketing page that has the product rotating around like it would in a TV commercial

What Breaks a Site

• So many animations to the point that they draw attention from the function/content of the page
• Bad performance due to animations being too complex and/or too many animations
• Taking control away from the user
  - For example: An overzealous smooth scroll that makes the user feel as though they don't have control over the page
• Not respecting screen real estate
  - An animation that might work great on a large desktop screen, may not work so well on a smaller smartphone screen
• Slow by design
  - For example: If the user wants to read a blog post, but they're forced to wait for a fade in
  - Sometimes these "slow by design" elements are necessary if they're literally covering up something loading

Things to Test

• Different zoom levels (zooming in may completely mess up an animation, forcing it to cover up content
• Different input methods (ie when scrolling, you should consider the scroll wheel, using the scroll bar on the screen, using the arrows on the screen, keyboard inputs (pgUp, pgDn, arrow keys, Home, End)
  - Failing to test inputs may result in undesired effects, like scrolling using a keyboard being way too slow...but working fine with a scroll wheel
• Various hardware at different power levels (if designing for the general public, you can't expect them to have a gaming rig ready to load your website's animations)
• Different internet/network speeds (elements popping in during an animation in progress can really mess things up)
• Vital triggers
  - For example: Blog post shows on scroll, but the area that triggers the animation is too sensitive and doesn't always work the way you'd expect