Web News

CSS Animations Can Make or Break a Site

March 21, 2023
March 29, 2023
Episode Number:

CSS animations are somewhat of an advanced CSS topic that many people skip out on when they're developing their site's MVP, or first few versions. Further into its life though, CSS animations (and transitions for that matter) add a level of polish to a website that can subtly bring about a premium feel for its UI/UX. It's quite easy, however, to go overboard with animations and transitions to the point where they feel out of place, sometimes looking like they're just being done for the sake of another animation instead of complimenting the content on the page. This week, Matt and Mike discussed CSS animations and CSS transitions, discussing the good, bad, and the ugly when it comes to using them on your next project.


Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

Show Notes


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