CSS transitions are the simplest way to make a web page feel alive. Instead of a property snapping instantly from one value to another when a state changes — for example on :hover, :focus, or when a class is added by JavaScript — a transition tells the browser to interpolate between the old and new values over a span of time. The result is motion that communicates change to the user without writing a single line of animation code.
In this module you will work with the four sub-properties that control that motion: transition-property (which properties are allowed to animate), transition-duration (how long the change takes), transition-timing-function (the acceleration curve, such as ease, linear, ease-in-out, or a custom cubic-bezier), and transition-delay (how long to wait before starting). You will also use the transition shorthand to combine them, and you will learn that not every CSS property is transitionable or cheap to animate — properties like transform and opacity are handled by the compositor, while animating width, height, or top forces the browser to redo layout and paint work on every frame.
As you watch the videos below, pay attention to three things: the exact syntax and ordering of values in the shorthand, where the transition declaration is placed (on the base state, not only on the hover state, so it applies in both directions), and any remarks about which properties are safe to animate. Keep a scratch HTML file open and reproduce each example yourself — transitions are far easier to understand by tweaking a duration or timing function and watching the difference than by reading about them.
A detailed tutorial lesson from CodeWithHarry's Sigma Web Development course that walks through the CSS transition property from the ground up. Based on its length and title, it should demonstrate the individual sub-properties — transition-property, transition-duration, transition-timing-function, and transition-delay — and then show how they are combined in the shorthand, with live code examples typically triggered by hover states.
This is the most complete single walkthrough of the topic in the list and maps directly onto nearly every subtopic, making it a good primary video; CodeWithHarry is a well-established web development instructor who codes along in the browser so you can follow the syntax step by step.
A fast, condensed overview from Academind that contrasts CSS transitions with CSS keyframe animations and explains when each is the right tool. The description points to a comparison of transitions versus animations, so expect a summary of the core syntax rather than a line-by-line beginner tutorial.
At under seven minutes it is an efficient review or preview, and its transitions-versus-animations framing is exactly the distinction this module asks you to make before you move on to @keyframes.
A focused, practical video from CSS Weekly on two classic transition problems: animating from height: 0 to height: auto, and transitioning elements that use display: none. It covers modern CSS approaches to these cases instead of the older hacks and workarounds developers have traditionally relied on.
It shows you what transitions can and cannot interpolate by default — a real limitation you will hit in your own projects — and the discussion of layout-affecting properties like height connects directly to the performance considerations subtopic.
Together these videos build the transition half of the module's learning outcomes. The CodeWithHarry tutorial gives you hands-on practice with duration, timing function, and delay so you can construct working transitions (MO2), while the Academind video draws the line between transition-based and keyframe-based CSS animation that MO1 asks you to articulate. The CSS Weekly video on height: auto and display: none exposes the limits of property interpolation and the cost of animating layout-affecting properties, which supports the performance analysis in MO4 and the property-selection best practices in MO5. The requestAnimationFrame material in MO3 is covered elsewhere in the module; use these videos to make sure you can reach for a CSS transition first whenever the browser can do the work for you.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.