CSS Transitions & Animations

HTML All The Things - Web Development, Web Design, Small Business

In this episode we focus on CSS transitions and animations, what they are, why they both exist, and when you should use one or the other.

Segment 1 - Transitions vs Animations

• AdobePress Article - reference link
• Transitions
  • Only have two states (triggered and not triggered)
  • Always run forward when triggered, and backwards when the trigger is removed
  • Common triggers are: hover, link, active, visited, focus, checked, disabled
  • Common use case: hover over a button and have the box shadow get darker as long as the cursor is hovering over it
• Animations
  • More control than transitions
  • Can start, stop, pause, run forwards, run backwards
  • Complex animations are possible by manipulating various properties within keyframes
  • May be more difficult to manipulate with Javascript
• Use animations if you need the complexity
• Use transitions if you have a simple affect that only needs two states (triggered, not triggered)

Segment 2 - How Transitions and Animations Improve UX

• Build your site with animations in mind so they don't look tacked on after the fact
• Don't be too flashy - your animations need to have purpose, shouldn't get in the way of the user experience
• Don't overwhelm the user with animations - may cause performance issues, can distract the user
• Keep animations consistent with the associated action - swipes with sliding animation, taps w/ pebble drop in water animation

Segment 3 - Performance

• Too many transitions or complex animations can cause serious performance issues
• The browser runs animations better over time (device starts to dedicate resources to the tab, cache builds up) so tests need to be done on a fresh incognito (or equivalent) window to ensure performance is good for first time users
• Test on older devices that may have slow hardware, or may have older browsers due to lack of support for newer updates
• Performance "hacks" - translate3d, translatez
  • More modern method "will-change"
  • Check out José Rosário’s page on Medium article: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 for an in-depth breakdown

Segment 4 - Animation Frameworks

• Three.js
  • Dependant on WebGL
  • Full 3D render capable
  • Is complex to start with
  • has been around now for 8+ years so a little bit bloated yet still supported
• Anime.js
  • Fastest/best performance large scale animation library
  • Extremely lightweight
  • Could replace Three.js due to simplicity and modern architecture
• ScrollReveal.js
  • Specific library for animation while scrolling
  • Using specific libraries for certain tasks maskes code more lightweight
  • Usually easier to implement then a larger more customizable library

Web News - Inconsistencies and Separation

• Mobile versions (app or mobile site) vs Desktop versions (apps or site)
• Separation of apps (multiple apps - same service/function)
• Inconsistent development features in an ecosystem

Patreon Supporters

Grigory Rechkin

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub

New! - Reddit