CF

CSS Animations & Transitions

2h 9m 35s
English
Paid
Updated September 2026

CSS Animations & Transitions is a 16-lesson 2 hours 9 minutes self-paced course by Level Up Tutorials (Scott Tolinski). Getting a hover effect or a fade to work in CSS is one thing; understanding why it behaves the way it does, and building genuinely complex animations on purpose, is another.

Course facts

Lessons
16
Duration
2 hours 9 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Level Up Tutorials (Scott Tolinski)
Price
Premium

Getting a hover effect or a fade to work in CSS is one thing; understanding why it behaves the way it does, and building genuinely complex animations on purpose, is another. This course covers both, starting from the fundamentals of CSS transitions and working up to advanced animation techniques.

What you'll learn

  • The syntax and mechanics of CSS transitions
  • Building smooth animations that improve rather than distract from user experience
  • Techniques for more complex, multi-step animations
  • Optimization and best practices for keeping animations performant

How it's structured

The course moves from an introduction to transitions, through building simple animations, into advanced techniques, and finishes with practical projects that put everything together. It's built for both beginners with basic CSS knowledge and intermediate developers looking to sharpen animation skills specifically, across 16 lessons.

Who teaches CSS Animations & Transitions? Level Up Tutorials (Scott Tolinski)

Level Up Tutorials (Scott Tolinski) thumbnail

Level Up Tutorials is the online course platform of Scott Tolinski, a US developer best known as the co-host (with Wes Bos) of the long-running Syntax podcast. Level Up Tutorials has been publishing modern web-development course material continuously since 2012 — one of the longer-running independent course platforms in the JavaScript ecosystem.

The course catalog covers the modern full-stack JavaScript landscape: React (including Next.js), Svelte / SvelteKit (Scott has been a long-running advocate for Svelte), Vue, GraphQL, Node.js, MongoDB, the testing tracks, Tailwind CSS, animation patterns, and the surrounding tooling. Material is structured around long-form project-based tutorial series rather than disconnected feature videos.

The CourseFlix listing under this source carries over 10 Level Up Tutorials courses spanning that range. Material is paid; Level Up Tutorials runs on a monthly / annual subscription on the original platform. Courses are aimed at intermediate-and-up web developers.

What lessons are included in CSS Animations & Transitions?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 16 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Series Introduction
All Course Lessons (16)
#Lesson TitleDurationAccess
1
Series Introduction Demo
00:53
2
An Introduction To CSS Transitions
10:30
3
An Introduction to CSS Animations
11:04
4
An Introduction To CSS Transforms
08:01
5
Cubic Bezier In Depth
07:57
6
Cubic Bezier In Depth Part 2
03:40
7
The 12 Priciniples of Animation
02:55
8
Making Good Animations
07:22
9
Squash & Stretch
11:26
10
Staging
05:17
11
Show:Hide Template Introduction
02:01
12
Staggered Animation
09:47
13
Staggered Animation Part 2
05:39
14
Playing With Inertia
11:50
15
Action Button Style Navigation
12:22
16
Circle Mask Reveal Navigation
18:51
Unlock unlimited learning

Get instant access to all 15 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to CSS Animations & Transitions?

More courses by Level Up Tutorials (Scott Tolinski)

  • Mastering Figma thumbnailUpdated

    Mastering Figma

    A step-by-step Figma course covering the interface, design principles, and team collaboration features through hands-on projects.
    3h 37m
  • Adobe XD Crash Course thumbnailFreeUpdated

    Adobe XD Crash Course

    A free, 25-lesson tour of Adobe XD covering the design workspace, prototyping, sharing feedback, and more advanced techniques.
    3h 11m
  • The Sketch Guide thumbnailUpdated 3y ago

    The Sketch Guide

    Learn the new industry standard for web design. Become an expert in Sketch, the app that is changing how designers work in the modern web and app design world.
    3h 23m
  • GitLab CE Tutorials thumbnailUpdated

    GitLab CE Tutorials

    Set up and use GitLab CE for version control, continuous integration, merge requests, and issue tracking, from install to first repo.
    1h 27m5/5
  • Deno 101 For Web Developers thumbnailUpdated

    Deno 101 For Web Developers

    An introduction to Deno, the secure Rust-based JavaScript and TypeScript runtime, covering setup, built-in tooling, and your first script.
    2h 46m
  • Atom Editor Tutorials thumbnailUpdated 3y ago

    Atom Editor Tutorials

    Atom is a modern text editor that you can customize for any action, or use productively, without even touching the configuration files. Atom works on all operat
    1h 34m

Frequently asked questions

What are the prerequisites for enrolling in this course?
This course is suitable for both beginners and those with some experience in CSS. A basic understanding of HTML and CSS is recommended to grasp the concepts of animations and transitions effectively. No prior experience with CSS animations is necessary as the course covers the fundamentals before moving on to more advanced topics.
What will I be able to build by the end of the course?
By the end of the course, you will be able to create intuitive and engaging user interfaces by using CSS animations and transitions. Projects include building simple animations, implementing action button style navigation, and developing circle mask reveal navigation to enhance user experience on web pages.
Who is the target audience for this course?
The course is designed for web developers and designers who are interested in enhancing their skills in CSS animations and transitions. It is ideal for those looking to create more engaging and interactive web experiences and for developers who want to stand out in the industry with advanced animation skills.
How does this course compare to other CSS courses?
This course focuses specifically on CSS animations and transitions, providing both foundational knowledge and advanced techniques. Unlike general CSS courses, it delves into the art of creating complex animations and covers specific topics such as the 12 principles of animation and cubic bezier curves in depth.
What specific tools or platforms are covered in the course?
The course focuses on CSS as a core tool for creating animations and transitions. Specific topics include CSS transitions, CSS animations, and CSS transforms. The course also explores cubic bezier curves and principles of animation to optimize and enhance animations.
What topics are not covered in this course?
The course does not cover other web technologies such as JavaScript or frameworks like React or Angular. Its focus is solely on CSS animations and transitions, so if you're looking for a course that integrates animations with other technologies, this might not meet your needs.
How much time should I expect to commit to this course?
The course consists of 16 lessons, and while the total runtime is not specified, engaging with the material fully, including practical exercises, will likely require several hours of study. The time commitment will vary depending on your prior experience and how deeply you choose to explore the practice exercises.