Css & Web Animation: Complete Guide With 60+ Projects

Master CSS transitions, keyframes, SVG, JavaScript & GSAP with 60+ real-world projects.

What you'll learn

CSS Transitions and how to create smooth, elegant hover and state-based animations.

CSS Keyframe Animations to build engaging, timeline-based effects.

Complete SVG Animations including filters, strokes, and motion paths.

JavaScript DOM Animations to make your animations dynamic and interactive.

And of course, we explore the full power of GSAP, the GreenSock Animation Platform — one of the most powerful animation libraries used by professionals worldwid

CSS hover and transition projects

Keyframe animation examples

Interactive SVG animation projects

JavaScript-powered animation components

And complete, professional-grade GSAP projects

Requirements

Basic understanding of HTML and CSS

A modern web browser (like Chrome, Firefox, or Edge)

A code editor – I recommend Visual Studio Code, which is free and easy to use

A willingness to learn and experiment with creative ideas!

Description

Hello and welcome to the most complete and advanced course on CSS Animation!I'm incredibly excited to have you here, because what you're about to learn is going to transform the way you design and animate on the web. Whether you're a beginner looking to add life to your UI, or an experienced developer ready to master professional animation techniques — this course is your one-stop destination.In this course, we dive deep into every major area of CSS animation:CSS Transitions and how to create smooth, elegant hover and state-based animations.CSS Keyframe Animations to build engaging, timeline-based effects.Complete SVG Animations including filters, strokes, and motion paths.JavaScript DOM Animations to make your animations dynamic and interactive.And of course, we explore the full power of GSAP, the GreenSock Animation Platform — one of the most powerful animation libraries used by professionals worldwide.But that’s not all — this course is packed with dozens of real-world projects, including:CSS hover and transition projectsKeyframe animation examplesInteractive SVG animation projectsJavaScript-powered animation componentsAnd complete, professional-grade GSAP projectsWith over 24 hours of high-quality content, 100s of downloadable resources, and step-by-step guidance, this course is designed to take you from the basics all the way to animation mastery.So, are you ready to breathe life into your web pages and build animations that truly stand out?Let’s begin this creative journey — and unlock the full potential of CSS Animation together!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 course structure

Section 2: CSS filter transition and prospective

Lecture 3 CSS Filter Tutorial

Lecture 4 CSS Transition Tutorial part 1

Lecture 5 CSS Transition Tutorial part 2

Lecture 6 CSS Transition Tutorial part 3

Lecture 7 CSS Transform 2D Tutorial part 1

Lecture 8 CSS Transform 2D Tutorial part 2

Lecture 9 CSS Transform 3D Tutorial part 1

Lecture 10 CSS Transform 3D Tutorial part 2

Lecture 11 CSS Perspective Tutorial

Lecture 12 CSS Transform-Style Tutorial

Lecture 13 CSS Backface-Visibility Tutorial

Section 3: 16 CSS Button transform project

Lecture 14 project 1 : Creative rotating button effect using css

Lecture 15 project 2 : swipe button effect using css

Lecture 16 project 3 : Button hover Effect

Lecture 17 project 4 : button glowing effect

Lecture 18 project 5 : Text scaling button using CSS

Lecture 19 project 6 : Circular swapping button

Lecture 20 Project 7: Rotating 3 layers button

Lecture 21 Project 8 : 3 circle to background button effect part 1

Lecture 22 Project 8 : 3 circle to background button effect part 2

Lecture 23 Project 9 : New button hover effect

Lecture 24 Project 10 : splited button effect part 1

Lecture 25 Project 10 : splited button effect part 2

Lecture 26 Project 11: border swapping button hover effect part 1

Lecture 27 Project 11: border swapping button hover effect part 2

Lecture 28 Project 12 : creative border growing button effect

Lecture 29 Project 13: creative first letter rotating button effect

Lecture 30 Project 14 : four border growing bottom effect

Lecture 31 Project 15: 2 cuts button effects

Lecture 32 Project 16 : CSS 3D Flip on Hover - Pure CSS3 3D Button Hover Effects

Section 4: 3 menu effects with CSS transition Project

Lecture 33 Project 1 : Growing Border menu

Lecture 34 Project 2 : border menu effect with background

Lecture 35 Project 3 : menu hover effect with transition delay

Section 5: 5 Image effect with transition projects

Lecture 36 Project 1 : fade in hover animation on image

Lecture 37 Project 2 : image hover effect

Lecture 38 Project 3 : slide up image transition project

Lecture 39 Project 4 : split image hover effect

Lecture 40 Project 5 : CSS 3d Layered Image Hover Effects

Section 6: CSS animation with keyframe

Lecture 41 CSS animation with keyframe

Lecture 42 Css animation-fill-mode

Lecture 43 animation iteration count

Lecture 44 animation Direction property

Section 7: 12 CSS keyframe animations project

Lecture 45 Project 1 : Rotationg loading effect using css animation

Lecture 46 Project 2 : driving car animation

Lecture 47 Project 3 : text Lighting Effect

Lecture 48 Project 4 : text totar animation

Lecture 49 Project 5 : animated button with css animation

Lecture 50 Project 6 : editable reflecting animated text

Lecture 51 Project 7 : animated button with CSS animation

Lecture 52 Project 8 : Creative Moon

Lecture 53 Project 9 : CSS 3D Wavy Circle Loader Animation Effects

Lecture 54 Project 10 : CSS3 3D Rotation Animation Effects

Lecture 55 Project 11 : animated rainy cloud part 1

Lecture 56 Project 11 : animated rainy cloud part 2

Lecture 57 Project 12 : CSS Loading… Text Animation Effects

Section 8: Javascript DOM for Animation

Lecture 58 JavaScript DOM Introduction Tutorial

Lecture 59 JavaScript DOM Targeting Methods Tutorial

Lecture 60 JavaScript DOM Targeting Methods Tutorial part two

Lecture 61 JavaScript DOM Get Methods Tutorial

Lecture 62 JavaScript DOM Set Methods Tutorial

Lecture 63 JavaScript DOM querySelector & querySelectorAll Tutorial

Lecture 64 JavaScript DOM CSS Styling Methods Tutorial

Lecture 65 JavaScript addEventListener Method Tutorial

Lecture 66 JavaScript addEventListener Method Tutorial part two

Lecture 67 JavaScript classList Methods Tutorial

Lecture 68 JavaScript setInterval & clearInterval Tutorial

Lecture 69 JavaScript setTimeout & clearTimeout Tutorial

Section 9: 10 Javascript Animation Project

Lecture 70 Js Animation Projects

Lecture 71 Project 1 : JavaScript text animation with glowing effect part 1

Lecture 72 Project 1 : JavaScript text animation with glowing effect part 2

Lecture 73 Project 2: Website parallax Effect part 1

Lecture 74 Project 2 : Website parallax Effect part 2

Lecture 75 Project 3 : Animated Eyes Follow Mouse Cursor

Lecture 76 Project 4 : Animated Eyes Follow Mouse Cursor adding javascript

Lecture 77 Project 5 : colorful text animation

Lecture 78 Project 6 : Clip-Path animation using JavaScript Part 1

Lecture 79 Project 6 : Clip-Path animation using JavaScript Part 2

Lecture 80 Project 7 : scroll Trigger animation part 1

Lecture 81 scroll Trigger animation part 2

Lecture 82 scroll Trigger animation part 3

Lecture 83 Project 8 : blinking star animation using JavaScript part 1

Lecture 84 blinking star animation using JavaScript part 2

Lecture 85 Project 9 : Day mode night mode Road animation part 1

Lecture 86 Day mode night mode Road animation part 2

Lecture 87 Project 10 : circular navigation menu using javascript

Lecture 88 circular navigation menu using javascript part 2

Section 10: SVG Animation

Lecture 89 Include SVG in HTML

Lecture 90 SVG ViewPort & ViewBox Tutorial

Lecture 91 SVG Line Element Tutorial

Lecture 92 SVG Rect Element Tutorial

Lecture 93 SVG Circle Element Tutorial

Lecture 94 SVG Ellipse Element Tutorial

Lecture 95 SVG Polyline Element Tutorial

Lecture 96 SVG Polygon Element Tutorial

Lecture 97 SVG Path Element Tutorial

Lecture 98 SVG Path Element Tutorial part 2

Lecture 99 SVG Path Element Tutorial - part 3

Lecture 100 SVG Text Element Tutorial

Lecture 101 SVG Image Element Tutorial

Lecture 102 SVG Stroke Properties Tutorial

Lecture 103 SVG Fill Properties Tutorial

Lecture 104 SVG Grouping Elements Tutorial

Lecture 105 SVG Defs, Symbol & Use Elements

Lecture 106 SVG TextPath Element Tutorial

Lecture 107 SVG linear Gradients

Lecture 108 SVG radial Gradients

Lecture 109 adobe illustrator to svg

Lecture 110 Svg ClipPath animation

Lecture 111 Adding JavaScript in svg image

Section 11: SVG Filters

Lecture 112 what is SVG filter

Lecture 113 SVG Filter implementation

Lecture 114 SVG feColorMatrix Filter

Lecture 115 feComponentTransfer

Lecture 116 SVG feComposite Filter

Lecture 117 SVG feConvolveMatrix Filter

Lecture 118 SVG feDiffuseLighting Filter

Lecture 119 SVG feDisplacementMap Filter

Lecture 120 SVG feTurbulence Filter

Section 12: 9 SVG Animation Project

Lecture 121 Project 1 : SVG path tracking animation

Lecture 122 Project 2 : Quick SVG Loader Animation

Lecture 123 Project 3 : svg title wrapping animation

Lecture 124 project 4 : 3D Hover Animation

Lecture 125 Project 5 : svg Wavy text animation

Lecture 126 Project 6 : SVG Text Masking with Video

Lecture 127 Project 7 : SVG Scroll Drawing

Lecture 128 Project 8 : SVG map reuniting animation

Lecture 129 Project 9 : Image Turbulence & Displacement Part 1

Lecture 130 Image Turbulence & Displacement Part 2

Section 13: GSAP Animation

Lecture 131 introduction and implementation GSAP animation

Lecture 132 GSAP animation properties and method

Lecture 133 Timeline in GSAP Create Your First Timeline

Lecture 134 Use ScrollTrigger

Lecture 135 scroll Trigger multiple animation and scrub

Lecture 136 scroll Trigger with pin

Lecture 137 Create Slick SVG Animations part 1

Lecture 138 Create Slick SVG Animations part 2

Lecture 139 Create Slick SVG Animations part 3

Section 14: 6 GSAP Animation Project

Lecture 140 Project 1 : Buld a Custom Cursor animation part 1

Lecture 141 Project 1 : Buld a Custom Cursor animation part 2

Lecture 142 Project 2: Create Animated Timeline Designs

Lecture 143 Project 3:Create Stunning Text Animations with GSAP Part 1

Lecture 144 Project 3:Create Stunning Text Animations with GSAP part 2

Lecture 145 Project 4:Create Scrolling Text Animations with GSAP

Lecture 146 Project 4:Create Scrolling Text Animations with GSAP part 2

Lecture 147 Project 5: Build an Animated Website with GSAP 1

Lecture 148 Project 5: Build an Animated Website with GSAP 2

Lecture 149 Project 6 : SVG Shape Morphing Animation part 1

Lecture 150 Project 6 : SVG Shape Morphing Animation part 2

Are a beginner in web development who wants to learn CSS animation from scratch,Are a front-end developer looking to enhance your UI with smooth, professional animations,Are a web designer who wants to animate layouts, buttons, icons, SVGs, and more,Are a JavaScript developer wanting to integrate CSS and DOM-based animations,Want to learn GSAP, the most powerful animation library used by professionals,Love project-based learning and want to build real-world, hands-on animation projects,Are preparing for a job or freelance work and want to add modern animation skills to your portfolio