CSS Animation for Developers
Transitions and keyframe animations taught through real components, until you can build the effects you used to import a library for.
You have seen a site with animations so smooth you opened dev tools to figure out how they did it. Most of the time the answer is not a fancy library. It is plain CSS, written by someone who learned the animation properties properly.
Transitions: the workhorse
The course starts with transitions because they cover most of the motion you see on the web. You animate a button, then build a dropdown menu across two lessons, which is a sneaky-good exercise: a dropdown needs the right property, the right timing, and the right trigger, or it feels broken. The section closes with using classes for transitions, which is how motion actually ships in production, a class gets added, the CSS does the rest.
Keyframes: full control
Then the animation property gets unpacked piece by piece: keyframes, iterations and directions, duration, timing functions, and play state. Fill-mode gets its own lesson, and the title gives away the hard-won advice: it should usually be forwards, so your animation ends where it looks like it ended instead of snapping back.
The section ends with a lesson called "No Need For Animate.css," which is the whole thesis of the course. Libraries are fine, but a developer who can write the effect in twelve lines, tuned to the design in front of them, beats one who imports three hundred effects to use two.
One honest note: this course covers CSS-driven motion. Scroll-triggered scenes and complex choreographed sequences usually bring JavaScript into the picture, and for that the GSAP and ScrollMagic course is the next level up. Start here though; solid CSS animation fundamentals make every animation library easier to learn. If your CSS itself still feels wobbly, CSS Basics is the place to firm it up first.
What you'll learn
- ✓ Understand how CSS transitions work and when to reach for them
- ✓ Animate a button and build a working dropdown menu with transitions
- ✓ Trigger transitions with classes the way production sites do
- ✓ Write keyframe animations with the animation property
- ✓ Control iterations, direction, duration, timing functions, and play state
- ✓ Use fill-mode correctly so animations end in the right state
- ✓ Recreate library-style effects yourself instead of importing Animate.css
Course Curriculum
5 sections
1
First Section
2
CSS Transitions
3
CSS Animation
4
GSAP
5
Videos Being Uploaded
Before you start
- ✓ Working HTML and CSS. You should be comfortable styling components before animating them
Frequently asked questions
What is the difference between transitions and animations? +
Do I build anything real? +
Do I still need an animation library like Animate.css? +
Is this included in Diamond and does it have a certificate? +
More courses you might like
CSS Course: Zero To Pro
The first time CSS breaks your heart is usually the same way. You follow a tutorial, everything looks fine, th...
Advance CSS with Flexbox and CSS Grid
For years, centering a div was a running joke among developers, because CSS genuinely made it hard. Then Flexb...
SASS Like a Pro Course
At some point every developer searches their stylesheet for a hex code and finds it pasted in forty places. Th...
Learn HTML and CSS by Building a Cool Social Network
You already know this design by heart. You have scrolled it thousands of times: the blue header, the left side...
Responsive HTML Emails Course
The first lesson in this course is called "How to get a 100k Salary with just HTML." I named it that...
Build A Niche Site From Scratch
There is a moment in every tutorial-watcher's life when they realize they have absorbed piles of strategy and...
