Skip to main content

Learn CSS Animations

A focused, two-hour Scrimba course with Jad Khalili on making interfaces move: transitions, keyframe animations, and the timing that makes motion feel intentional.

Quick answer​

Learn CSS Animations is a Pro-tier, intermediate course: about 2 hours and 28 lessons, taught by Jad Khalili. It gives you a working foundation in CSS transitions and keyframe animations, reinforced with real coding challenges rather than passive demos. It is aimed at developers who already know CSS and want to add motion skills, not at people learning CSS from zero.

Is it worth your time?​

Motion is one of the things that separates a competent layout from a polished one, and it is genuinely hard to learn from static articles. Watching a transition curve change as you edit the timing function, right there in the player, is where this format helps most. The challenges push you to write the animations yourself instead of nodding along, which is the difference between recognising the syntax and being able to use it.

The honest caveat is that animation is a deep, taste-driven topic and two hours is a foundation, not mastery. You will come out able to build solid transitions and keyframe sequences, but the harder parts (performance, orchestrating complex sequences, restraint) come from practice afterward. Treat it as the on-ramp it is.

What you'll learn​

The course builds from transitions (hover states, state changes, easing functions) up to keyframe animations with @keyframes, then into the timing and sequencing choices that make motion feel deliberate rather than gimmicky. The coding challenges are the spine: you implement each technique on a real element and see the result immediately. By the end you can add purposeful motion to a UI without reaching for a library.

It assumes you can already write CSS comfortably, so it spends its time on motion specifically rather than re-covering selectors and the box model.

Who it's for, and who should skip it​

It fits developers who know their way around CSS and want to make interfaces feel alive: front-end developers, designers who code, anyone building portfolios where polish counts.

Skip it if your CSS fundamentals are still shaky (do Learn HTML and CSS or Learn Responsive Web Design first), or if you only need a single hover effect and can grab it from documentation.

Prerequisites​

Comfortable HTML and CSS, including selectors, the box model, and positioning. No JavaScript is needed.

Where it fits​

This sits among the styling and polish courses on the Frontend Developer Path and the Fullstack Developer Path. It is an enhancement skill, best taken after you can build static layouts confidently.

Free or Pro​

This is a Pro course, so it needs a Scrimba subscription. Pro also covers the career paths, challenges, certificates, and Discord. See current plans for what Pro costs in your region.

Strengths and limits​

What it does well: it makes an inherently visual, hard-to-read-about topic genuinely interactive, and the challenge-driven structure forces you to write the code.

Where it is limited: two hours is a foundation, not a deep dive. Advanced sequencing, performance tuning, and the design judgement around motion are left to your own practice.

View Learn CSS Animations on Scrimba (opens in a new tab)

Related Guides

Next step

All Courses

Docs
Last updated on