A reading that explains how browser animation works under the hood, why it matters for user experience, and introduces the two main animation approaches (CSS and JavaScript), used by learners to build foundational knowledge before exploring specific techniques.
Topics
This module covers 5 topics. Open a topic to see its subtopics.
Module Content
12 items.
-
-
A reading that explains CSS transitions — how they smoothly animate property changes between two states without JavaScript, including syntax, timing functions, and practical use cases — used by learners to implement simple, state-driven animations.
-
A reading that covers CSS keyframe animations, explaining how to define multi-step animations using @keyframes and the animation property, including looping, reversing, and controlling intermediate states, used by learners to create complex, self-running CSS animations.
-
A reading that explains the requestAnimationFrame API, how it synchronizes JavaScript animations with the browser's rendering engine for smooth, performant motion, and how to structure an animation loop, used by learners to build custom JavaScript-driven animations.
-
A reading that covers browser rendering performance for animations, including the 60 fps target, the impact of different CSS properties on the rendering pipeline, and best practices for keeping animations smooth, used by learners to optimize their animation implementations.
-
A duplicate reading identical to artifact 6 that covers browser rendering performance for animations, the 60 fps threshold, and best practices for smooth animation, used by learners to review or reinforce animation performance concepts.
-
An opening reading that defines browser animation as the timed change of visual properties and walks through the rendering pipeline (style, layout, paint, composite) behind effects like fades, slides, and spinners, giving learners the conceptual foundation for the rest of the module.
-
A lesson on CSS transitions that explains how to interpolate property values between states such as :hover, :focus, or JavaScript-added classes, with guidance on duration, timing functions, and which properties to transition for smooth state changes.
-
A lesson on @keyframes animations covering how to define multi-step sequences using percentage stops or from/to shorthand and attach them to elements with the animation property, letting learners build looping or multi-stage motion without JavaScript.
-
A lesson on scripted animation using requestAnimationFrame, showing when frame-by-frame computation is needed — physics, collisions, input-driven values, canvas drawing — and how to structure a rAF loop that syncs with the browser's refresh cycle.
-
A best-practices reading on animation performance that explains the roughly 16ms-per-frame budget for 60fps and how to avoid layout and paint work by animating compositor-friendly properties, useful for diagnosing and fixing janky animations.
-
A consolidated module overview page that compiles all the lesson readings — browser animation fundamentals, CSS transitions, keyframe animations, requestAnimationFrame, and performance practices — into a single document for review or printing.