Advanced animation with CSS in HTML and SVG to improve UX

on YouTube ↗38m

" summary

Covers using CSS animations in HTML and SVG to improve UX through communicative microinteractions. Shows concrete techniques: animating CSS properties with performance in mind, animating element entrance, creating persistent secondary animations, animating SVG, using step() timing, and preparing CSS animations so JavaScript-managed triggers can apply them.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 12:59Animating background-position with separate axes
3. 20:07Layout without considering animations
4. 28:42Providing user feedback
5. 31:23Directing attention

" related talks

• 44mFunctional AnimationSarah Drasner · CSSConf.Asia 2016
• 46mCSS animations are heating up!Raphaël Goetter · ConFoo 2025
• 31mSurprise and delight: CSS + SVGChris Wright · CSSConf Australia 2014
• 38mCSS in motion: Animations for fun and profitMartine Dowden · NDC Oslo 2022
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 28mCSS Animation - Beyond TransitionsSteven Roberts · CSSConf Budapest 2019
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 49mSVG in motionSara Soueidan · ffconf 2015