HTML All The Things - Web Development, AI, and Developer Careers CSS Transitions & Animations
Sep 19, 2018
01:24:00
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
New! - Reddit