CSS Transitions & Animations
01:24:00 Share

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)