Mega CSS Animation Course : 30 Projects Included

Learn to embed a full-height background video in a hero area using the video tag, with muted autoplay and proper sizing, plus hover effects for the contact us button.

Explore three unique hover effects by building an animated card with a glass container and layered back content, using z-index, absolute positioning, and transform transitions.

Explore ten unique hover effects in CSS animation with practical tricks like border radius transitions, front/back movement, opacity changes, and translation to create engaging UI interactions.

Learn how to build a loader animation featuring four absolutely positioned spans inside a 200 by 200 container, animated with keyframes to grow, morph into circles, and glow with box-shadow.

Design a Pac-Man style loader using two semicircles with before and after pseudo elements, animated with horizontal movement and rotation to create the loader 8 effect.

Create a fun CSS animation where a dino chases Santa using keyframes, moving left from 0 to beyond 100 percent, and hiding overflow to prevent scrollbars.

Learn to animate sprite sheets in css by driving horizontal and vertical frame transitions with background-position and steps, illustrated through the Bahamut project and frame-size calculations.

Create a 2D car animation by selecting a car image, setting an absolute position, and moving left from -20% to 120% in a 640 by 320 canvas for 3 seconds.

Create walking sprites for a boy and a girl using CSS animation, sprite frames, and keyframes, adjusting size and position while flipping along the y axis for realism.