CSS3 Animations, Transforms and Transitions Ultimate Guide

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course Overview

Lecture 2: Setting Up the Working Environment

Lecture 3: What is Web Animation? Why to animate?

Lecture 4: Creating Our First Animation

Chapter 2: Transforms

Lecture 1: Introduction to Transforms

Lecture 2: Moving Elements using Translate Function

Lecture 3: Resizing Elements using Scale Function

Lecture 4: Spinning Elements using Rotate Function

Lecture 5: Tilting Elements using Skew Function

Lecture 6: Transformable Elements

Lecture 7: Moving the Origin of the Element

Lecture 8: Multiple Transforms on One Element

Chapter 3: Project: Polaroid Image Gallery

Lecture 1: Creating a Polaroid Image Card

Lecture 2: Creating the Gallery

Lecture 3: Paste Our Polaroid Images with Sticky Tapes

Lecture 4: Final Touches

Chapter 4: Transitions

Lecture 1: Controlling Our Transitions

Lecture 2: Defining property to Apply the Transition

Lecture 3: Specifying How Long the Transition Will Take

Lecture 4: Transition Timing Functions Part 1

Lecture 5: Transition Timing Functions Part 2

Lecture 6: Transition Timing Functions Part 3

Lecture 7: Setting Timeout Before the Transition

Lecture 8: Lab Session: Bringing All Transition Properties Together

Lecture 9: Transition Shorthand Property

Lecture 10: Using Multiple Transitions on An Element

Lecture 11: Lab Session: Rocket Emoji Animation with Multiple Transitions

Lecture 12: Which CSS properties can be transitioned?

Lecture 13: Lab Session: Adding Transition Effects to Our Polaroid Image Gallery

Chapter 5: Project: Creative Link Effects

Lecture 1: Growing and Scaling Bottom Effects

Lecture 2: Left to Right and Right to Left Effects

Lecture 3: Center to Edges Effect

Lecture 4: Edges to Center Effect

Lecture 5: Top and Bottom Left to Right and Right to Left Effects

Lecture 6: Top and Bottom Reverse Effect

Lecture 7: Swipe Text Effect in Vertical Direction

Lecture 8: Swipe Text Effect in Horizontal Direction

Lecture 9: Left Right Lines to Top and Bottom Effect

Chapter 6: Project: Cool Button Effects

Lecture 1: Scale Effect – Grow and Shrink Button Size

Lecture 2: Swipe Fill Left and Right Effects

Lecture 3: Swipe Fill Top and Bottom Effects

Lecture 4: Slice Effect in Vertical Direction

Lecture 5: Slice Effect in Horizontal Direction

Lecture 6: Left Top and Right Bottom Corners to Full Border Effect

Lecture 7: Right Top and Left Bottom Corners to Full Border Effect

Lecture 8: Micro Interactions – Button Icons Effects

Lecture 9: Circle Fill Hover Effect

Lecture 10: Mouse Position Aware Circle Fill Hover Effect

Lecture 11: Social Buttons with Hover Effects

Chapter 7: Project: Image Hover Effects

Lecture 1: Zoom In Effect

Lecture 2: Zoom Out Effect

Lecture 3: Rotate Effect

Lecture 4: Filter Effects – Sepia and Grayscale

Lecture 5: Caption Hover Effect

Chapter 8: Keyframe Animations

Lecture 1: Animations

Lecture 2: Defining Keyframes

Lecture 3: Lab Session: Moving Around Box

Lecture 4: Specifying the Animation Name

Lecture 5: Defining How Long the Animation Lasts

Lecture 6: Animation Timing Functions

Lecture 7: Lab Session: Sprite sheet animation with steps()

Lecture 8: Setting Timeout Before the Animation

Lecture 9: Defining How Many Times the Animation Run

Lecture 10: Specifying the Animation Direction

Lecture 11: Defining Styles Before and After the animation

Lecture 12: Pausing Animation – Controlling the Animation State

Lecture 13: Animation Shorthand Property – Bringing All Animation Properties Together

Lecture 14: Multiple Keyframe Animations on Element

Chapter 9: Project: Pure CSS Spinners and Preloaders

Lecture 1: Classic Circular Border Spinner

Lecture 2: Growing Circle Spinner

Lecture 3: Three Dots Pulse Spinner

Lecture 4: Heartbit Preloader

Lecture 5: Rotating Squares Preloader

Lecture 6: Wave Preloader

Lecture 7: Colorful Center Squares Preloader

Lecture 8: Square to Circle Rotating Spinner

Lecture 9: Clock Arrow Spinner

Chapter 10: Project: Real Life Animations

Lecture 1: Pure CSS Typing Effect

Lecture 2: Auto Play Pure CSS Image Slider

Lecture 3: Fading Overlay with Spinner

Lecture 4: Animated progress bar – Loading Bar

Chapter 11: New Dimension with 3D Transforms

Lecture 1: What is 3D Transform?

Lecture 2: Getting the Perspective

Lecture 3: Perspective Origin and perspective() Function vs perspective Property

Lecture 4: Translation in 3D

Lecture 5: Scaling in 3D

Lecture 6: Rotation in 3D

Lecture 7: transform-style

Lecture 8: Dealing with Back Faces