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

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

Patreon Supporters

Grigory Rechkin

You can find us on...

New! - Reddit

CSS Transitions &amp; Animations 01:24:00 Share

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