Animation in the browser is the controlled change of visual properties over time: an element fades in, a menu slides open, a chart bar grows, a loading spinner rotates. Behind every one of these effects is the browser's rendering pipeline, which recalculates styles, lays out elements, paints pixels, and composites layers — ideally fast enough to produce a new frame roughly every 16.7 milliseconds (60 frames per second). Understanding that pipeline is what separates animation that feels polished from animation that stutters.
Animation matters in this course because it is a user experience tool, not decoration. Motion communicates state changes, directs attention, confirms that an action registered, and makes transitions between views feel continuous rather than abrupt. Used carelessly, it does the opposite: it distracts, delays interaction, and drains battery on mobile devices.
There are two primary approaches you will work with. CSS-based animation (transitions and @keyframes) is declarative — you describe the start and end states and let the browser handle the frames, often on the compositor thread for free performance. JavaScript-driven animation (typically using requestAnimationFrame) is imperative — you compute values frame by frame, which costs more but buys you control over physics, user input, and dynamic conditions. As you watch these videos, pay attention to three things: which properties are being animated, who is deciding the value of each frame, and what the speaker says about when to pick one approach over the other.
A fast crash course on CSS animations that, based on its title and description, walks through the animation properties one at a time — things like duration, timing function, delay, iteration count, direction, and fill mode — and then applies them in a small loading animation project. The @keyframes rule and how it defines intermediate states should be central to the walkthrough. Expect a compressed, demo-driven format rather than deep theory.
It gives you a concrete, property-by-property grounding in the CSS side of animation, which is the foundation for the rest of the module and directly supports the subtopic on CSS-based animation.
Academind's short overview focuses on the distinction between CSS transitions and CSS animations — when a simple state-to-state transition is enough versus when you need a multi-step keyframe animation. The description signals that transitions versus animations is a key point of the video. It is a quick conceptual framing rather than an exhaustive syntax reference.
Academind is a well-established web development channel, and this video cleanly separates two CSS mechanisms that students frequently confuse, reinforcing the CSS-based animation overview subtopic.
A short interview-format video featuring Bruno Simon, known for creative web experiences, discussing how CSS animations differ from JavaScript animations. The timestamps show that nearly the entire four minutes is devoted to the comparison itself. Expect practitioner perspective on trade-offs and when each approach is the right tool.
It speaks directly to the central subtopic of this page — the two primary approaches — and frames the choice as a practical engineering decision rather than a matter of preference.
Together these videos build the conceptual base the module outcomes depend on. The Coding2GO and Academind videos supply the vocabulary and sub-properties needed for MO2 (duration, timing function, delay, iteration count, direction, fill mode) and clarify the transition-versus-keyframe distinction that MO1 asks you to make. The Prismic interview addresses the other half of MO1 by contrasting CSS with JavaScript-driven animation and the use cases each serves, setting up the requestAnimationFrame work in MO3. None of these short videos covers the rendering pipeline, composited properties, layout thrashing, or DevTools profiling in depth, so MO4 and MO5 will be developed through the module readings and hands-on profiling activities that follow.
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.
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.
CSS keyframe animations let you describe a sequence of style changes over time without writing any JavaScript. You define the sequence once with the @keyframes rule — naming it and listing the states the element should pass through at 0%, 50%, 100%, or using the from and to shorthands — and then attach that named sequence to an element with the animation property. Unlike a transition, which only runs when a value changes, a keyframe animation can run on page load, repeat indefinitely, and move through many intermediate steps.
In this course the keyframe animation is your main declarative animation tool, and the real learning is in the sub-properties that control how the sequence plays: animation-duration and animation-delay for timing, animation-timing-function for easing (including steps() for frame-by-frame effects), animation-iteration-count for repetition, animation-direction for normal, reverse, and alternate playback, animation-fill-mode for what styles apply before the animation starts and after it ends, and animation-play-state for pausing and resuming.
As you watch, pay attention to three things. First, the exact syntax of a @keyframes block and how percentages map to points in the timeline. Second, how each sub-property changes the visible result — try predicting the outcome before the instructor shows it. Third, which CSS properties are being animated: properties like transform and opacity are cheap for the browser to animate, and that choice connects directly to the performance material later in this module.
A tutorial-style walkthrough of CSS animations from the Sigma Web Development Course, covering how to write a @keyframes rule and then apply it to elements using the animation shorthand and its individual sub-properties. At roughly eighteen minutes it has room to demonstrate duration, delay, iteration count, direction, fill mode, and timing functions with worked examples in the browser. Expect live code edits where a change in a property is immediately reflected in the rendered result.
CodeWithHarry is a widely followed web development channel, and this is the longest and most systematic of the three videos, so it is the best fit for covering the full list of animation sub-properties in this topic rather than just the basics.
A fast-paced crash course that, according to its description, explains every animation property and ends with a small loading-animation project. In under nine minutes it moves through defining keyframes and setting duration, timing function, delay, iteration count, direction, fill mode, and play state. The loading spinner example shows how infinite iteration and a linear timing function combine in a practical component.
It is an efficient review or preview of the same property set covered in the longer tutorial, and the loading-animation project gives you a concrete, reusable case where repetition and timing functions matter.
A DesignCode tutorial that applies CSS keyframes inside a React project using styled-components, opening with an explanation of what CSS keyframes are before moving into the React-specific setup. It demonstrates how a keyframes definition is declared in JavaScript-backed styling and then referenced from a styled component's animation property. The animation concepts themselves — the keyframe steps and the animation sub-properties — are the same ones used in plain CSS.
It extends the topic beyond a static stylesheet into a component-based workflow, which is useful for a web applications course, and it reinforces that @keyframes syntax carries over unchanged into modern front-end tooling.
Together these videos target MO2 most directly: each one builds a @keyframes rule and then applies animation sub-properties such as duration, timing function, delay, iteration count, direction, and fill mode to an element. The CodeWithHarry and Coding2GO videos give you both a detailed and a condensed pass over the same property set, which helps you move from recognizing the syntax to choosing property values deliberately, while the DesignCode video shows the same technique inside a React component. By making clear what CSS alone can express declaratively, they also establish the baseline you need for MO1, where you decide when a keyframe animation suffices and when a requestAnimationFrame loop is the better tool, and they surface the property choices (transform, opacity) that the performance outcomes MO4 and MO5 build on.
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.
CSS transitions and keyframe animations are excellent for declarative, predictable motion, but some animations need to be computed frame by frame — physics, collisions, values that depend on user input, or drawing on a canvas. That is where requestAnimationFrame (often shortened to rAF) comes in. It asks the browser to call a function just before the next repaint, so your updates land in step with the browser's own rendering cycle instead of fighting it.
The core pattern is simple and worth memorizing: write a function that updates state and applies it to the DOM or canvas, then call requestAnimationFrame again from inside that function to schedule the next frame. The callback receives a high-resolution timestamp, which you use to compute elapsed time (delta time) so motion stays consistent regardless of the device's frame rate. Saving the ID returned by requestAnimationFrame lets you stop the loop later with cancelAnimationFrame — a detail many beginners skip and then wonder why animations keep running in the background.
As you watch these videos, pay attention to four things: where the loop re-schedules itself, how time is handled, which properties are being changed each frame, and how the speaker contrasts rAF with setInterval or setTimeout. The timer-based approach can drift, fire while the tab is hidden, and produce frames the browser never paints; rAF avoids all three. Try pausing each video and rebuilding the loop yourself before watching the finished result.
A focused walkthrough of animation fundamentals applied in plain JavaScript, using requestAnimationFrame to drive the motion of an example element. Expect to see the basic loop structure — an update function that recalculates position and then re-schedules itself for the next frame — along with how the changing values are written back to the page each tick.
This is the most direct match for the core subtopics: what requestAnimationFrame is and how to build and run a basic animation loop, demonstrated at a pace short enough to follow along in your own editor.
Built around a frames-per-second display template, this video makes frame timing visible and then compares requestAnimationFrame with setInterval head to head. Because it measures FPS on screen, it naturally touches on the timestamp and elapsed-time calculations that underlie smooth, frame-rate-independent motion.
It addresses the performance-advantages and synchronization subtopics explicitly, and seeing an actual FPS counter react to each technique is far more convincing than reading a description of the difference.
From The Coding Train, this p5.js tutorial introduces variables alongside the setup() and draw() functions, using mouseX and mouseY as live, changing values. The draw() function is p5's wrapper around a requestAnimationFrame loop, so this is a gentle look at the same idea: state that changes every frame and is redrawn to a canvas.
It is a clear, well-produced introduction to the mental model of a per-frame draw loop and canvas updates, which helps before you write the raw requestAnimationFrame version yourself — just remember p5 is hiding the rAF call for you.
Together these videos target MO3 most directly: the first demonstrates constructing a requestAnimationFrame loop and updating element properties each frame, the second surfaces timestamp and frame-rate reasoning through an on-screen FPS counter, and the third builds intuition for per-frame canvas drawing and changing state. The rAF-versus-setInterval comparison supports MO1 and MO5 by showing concretely why a rendering-synchronized loop produces smoother results than timer-based animation, and it provides a frame-rate reference point you will use again in MO4 when profiling animations in Chrome DevTools. Note that cancelAnimationFrame and loop cancellation are only lightly implied here, so plan to practice stopping and restarting a loop in the module exercises.
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.
Animation on the web looks simple from the outside — an element slides, fades, or spins — but underneath, the browser is doing a surprising amount of work on every single frame. To hit a smooth 60 frames per second, the browser has roughly 16 milliseconds to recalculate styles, lay out the page, paint pixels, and composite layers onto the screen. When your animation forces the browser to redo expensive stages of that pipeline too often, frames get dropped and the motion feels janky.
This topic focuses on the performance side of animation: understanding the rendering pipeline (style, layout, paint, composite), knowing which properties the GPU can animate cheaply (transform and opacity) versus which trigger layout or paint, avoiding layout thrashing caused by interleaved DOM reads and writes, deciding when CSS animation is the better tool and when a JavaScript requestAnimationFrame loop is needed, and using Chrome DevTools to measure rather than guess.
The two videos below approach this from different angles. The first builds background intuition about how a browser gets from a URL to rendered pixels, which is the context the rendering pipeline sits inside. The second is a practical refresher on CSS animation syntax and properties — useful because so many performance recommendations boil down to "let CSS and the compositor do the work when you can." As you watch, keep asking: which properties are being animated here, and which stages of the pipeline would they trigger?
A short, animated explainer from ByteByteGo that walks through what happens after you type a URL and press Enter: DNS resolution, establishing a connection, the HTTP request and response, and the browser receiving and rendering the returned HTML. It is a high-level systems overview rather than a CSS tutorial, ending with the browser parsing the response and displaying the page.
It gives you the end-to-end context in which the rendering pipeline operates, so that when we zoom in on style, layout, paint, and composite you understand where those steps sit in the browser's overall work. ByteByteGo is a well-known systems-design channel with clear, accurate visual explanations.
A fast-paced crash course covering CSS animation properties — animation-name and @keyframes, duration, timing function, delay, iteration count, direction, and fill mode — demonstrated through a small loading-animation project. Expect concrete code examples showing how each sub-property changes the resulting motion.
Fluency with CSS animation syntax is a prerequisite for the performance decisions in this topic: you cannot compare CSS versus JavaScript approaches or choose composited properties until you know what CSS can express. The project-based format makes the properties concrete rather than abstract.
Together these videos support the module outcomes from two directions. The CSS animation crash course directly reinforces MO2 by demonstrating transition and @keyframes sub-properties such as duration, timing function, delay, iteration count, direction, and fill mode, and it gives you the CSS vocabulary needed to make the CSS-versus-JavaScript judgment calls in MO1 and MO5. The browser pipeline explainer supports MO4 by framing where rendering fits in the browser's overall work, which is the mental model you need before analyzing pipeline stages, identifying composited properties, and profiling in Chrome DevTools. Neither video substitutes for the hands-on requestAnimationFrame work in MO3 or the DevTools profiling exercises — those come from the module readings and labs — so treat these as background and syntax grounding rather than complete coverage.
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.