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.