CSS Animations & Transitions
9 lessonsAbout 54 minutesIntermediate
This part of the CSS Tutorial runs from CSS Transform through to Motion Paths. There are 9 lessons here, and working through them takes about 54 minutes at a steady pace.
It follows on from CSS Effects, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1CSS TransformThe CSS Transform property is used to change the position, size, rotation, or shape of an element without affecting the normal document layout.
- 2CSS 2D TransformCSS 2D Transform allows you to modify an element's appearance on a two-dimensional plane using the X and Y axes.
- 3CSS 3D TransformCSS 3D Transform allows you to transform elements in a three-dimensional space using the X, Y, and Z axes.
- 4CSS TransitionsThe CSS Transition property allows you to create smooth animations between property changes.
- 5Entry & Exit TransitionsAnimate elements as they enter, leave, or move through the top layer with starting styles and discrete property transitions. It covers first-render transitions, discrete properties, popovers, dialogs, top-layer removal, and reduced-motion handling.
- 6CSS AnimationsCSS Animations allow elements to change styles automatically over time without requiring JavaScript.
- 7Scroll AnimationsDrive animation progress from a scroll container or an element's passage through the scrollport instead of elapsed time. It distinguishes scroll and view timelines, animation ranges, named timelines, progressive enhancement, and motion preferences.
- 8View TransitionsCreate coordinated transitions between page states and documents with named snapshots and view-transition pseudo-elements. You will name transition participants, style snapshot pseudo-elements, enable document navigation, and account for reduced motion.
- 9Motion PathsPosition and animate an element along a path while controlling its rotation and distance. The lesson covers path geometry, offset distance, automatic rotation, anchor points, keyframe animation, basic shapes, and reduced motion.