CSS animation: Prep
Learning objectives
By the end of this session students will be able to:
- Break down visual animation ideas into pieces that can be built with CSS
- Create visual transitions between styles based on simple user interaction like mouse hover
- Create more complex animations using the animation module, including the use of keyframes
- Use animation to make a webpage more usable, while respecting accessibility conditions like motion sensitivity and vestibular disorders
Pre-sessional activities
Priority
There are approximately 75 minutes of priority videos, and 3 priority articles.
Dev Dreamer (Amit), “#30 CSS Transform Property - CSS Full Tutorial,” YouTube, 7m 40s, 26 Oct 2019.
Dev Dreamer (Amit), “#31 CSS Transition Property - CSS Full Tutorial,” YouTube, 8m 40s, 1 Nov 2019.
Kevin Powell, “Animating with CSS Transitions - A look at the transition properties,” YouTube, 17m 59s, 18 Jan 2018.
“Using CSS transitions,” Mozilla Developer Network, Nov 2025.
Dev Dreamer (Amit), “#32 CSS Animations - CSS Full Tutorial,” YouTube, 15m 24s, 13 Nov 2019.
Kevin Powell, “Create a pulsing animation with CSS,” YouTube, 23m 26s, 2 Sep 2020.
“Using CSS animations,” Mozilla Developer Network, Nov 2025.
Kevin Powell, “prefers-reduced-motion” section of “3 super small changes to improve your CSS,” YouTube, 8m 0s, 7 Mar 2023.
Eileen Webb, “Your Interactive Makes Me Sick,” Source, 1 Mar 2018.
Also recommended
Kevin Powell, “CSS Variables - An introduction to CSS custom properties,” YouTube, 12m 1s, 20 Dec 2017.
Fireship, “Make Awesome SVG Animations with CSS,” YouTube, 26 Mar 2021.
Oirana Garcia, “Creating Accessible UI Animations,” Smashing Magazine, 10 Nov 2023.