CSS Transitions & Animations

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