> Canonical URL: https://codingcat.dev/course/css-animations

# CSS Animations | CodingCat.dev Course

🧶 CodingCat.dev Course4 Lessons[Start Course →](/course/css-animations/lesson/1_1-hamburger-button)

# CSS Animations

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/07703a0d8102dd092c5f4a691bc08579a7514921-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: CSS Animations✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for CSS Animations: start with Buttons, implement 3rd Party Libraries, and ship to production.AAA Contrast Verified

## Let’s Have Fun!

Why would you want to learn something boring, why not learn about raining cats, dogs, and unicorns! You will find examples of fun animations that you can take away with you in your projects. Each one of the lessons will have an associated [codepen](https://codepen.io/codercatdev) so you can [fork](https://blog.codepen.io/documentation/forks/#:~:text=%23How%20to%20Fork,ready%20to%20save%20your%20changes.) the example and keep it for yourself!

## course lessons.

1

### Buttons

- [1.1Material Hamburger Button▶ Video + LessonStart Lesson →](/course/css-animations/lesson/1_1-hamburger-button)

2

### 3rd Party Libraries

- [2.1JavaScript Confetti libraryJavaScript Confetti library 💥 Supports emojis as confetti⚡️ Zero dependencies used🦄 Works without any config, yet configurable🛠 Has TypeScript typings🧩 Confetti speed adapts to user screen width.📖 Written LessonStart Lesson →](/course/css-animations/lesson/3_1-js-confetti)

3

### Feedback

- [3.1Round Loading IndicatorIn this video we review the opacity property.📖 Written LessonStart Lesson →](/course/css-animations/lesson/round-loading-indicator)

4

### Inputs

- [4.1Material Checkbox without Material UI (only CSS)In this lesson we create a checkbox that transforms into a checkmark just only css.📖 Written LessonStart Lesson →](/course/css-animations/lesson/material-checkbox-without-material)