playlistduration

CSS Animation Tutorial

by Net Ninja · 13 videos

Total watch time

1h 19m

at 1× speed · exactly 1 hour, 19 minutes, 1 second at 1×

1×1h 19m 1s
1.25×1h 3m 13s
1.5×52m 41s
1.75×45m 9s
2×39m 31s
Average video6m 5s
Longest10m 20s
Shortest3m 16s
Compare Open on YouTube JSON

Plan to finish

About 2 days at an hour a day

Pick a daily pace and the days you'll watch. Ticked videos are skipped.

Days

At one hour a day, every day, this playlist takes about 2 days. Turn on JavaScript to plan around your week.

Videos (13)

1h 19m in total · tick what you've watched

Tick videos you've watched — progress is saved in this browser.

Videos to
Watched
1 CSS Animation Tutorial #1 - Introduction 3:46 2016-04-12
2 CSS Animation Tutorial #2 - Transforms 10:20 2016-04-12
3 CSS Animation Tutorial #3 - Transitions 7:31 2016-04-12
4 CSS Animation Tutorial #4 - Keyframes 6:08 2016-04-13
5 CSS Animation Tutorial #5 - Animation Fill Mode 3:52 2016-04-14
6 CSS Animation Tutorial #6 - Repeating Animations 3:16 2016-04-14
7 CSS Animation Tutorial #7 - Animation Direction 4:22 2016-04-14
8 CSS Animation Tutorial #8 - Animation Timing Functions 5:37 2016-04-14
9 CSS Animation Tutorial #9 - Animation Shorthand 6:27 2016-04-20
10 CSS Animation Tutorial #10 - Chaining Animations 3:49 2016-04-20
11 CSS Animation Tutorial #11 - Animating a Pop-up 9:35 2016-04-22
12 CSS Animation Tutorial #12 - Animating a Shopping Cart 6:20 2016-04-28
13 CSS Animation Tutorial #13 - Flipping Cards Animation 7:58 2016-04-28

Embed a badge

Show the watch time in a README or course description — it links back here and updates itself

Watch time: 1h 19m · 13 videos

Markdown
[![Watch time: 1h 19m · 13 videos](https://playlistduration.com/badge/playlist/PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5.svg)](https://playlistduration.com/playlist/PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
HTML
<a href="https://playlistduration.com/playlist/PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5"><img src="https://playlistduration.com/badge/playlist/PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5.svg" alt="Watch time: 1h 19m · 13 videos" width="203" height="20"></a>

Add ?speed=1.5 to the image URL for the time at that speed, ?label=Course to change the left text, or ?style=flat-square for square corners.

Want the numbers themselves? GET https://playlistduration.com/api/v1/playlist/PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5 returns them as JSON — free, no key. API docs →

Data from the YouTube Data API as of 2026-09-22 (cached). Private or deleted videos are excluded from totals.