Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

CSS3 Animations, Transforms and Transitions Ultimate Guide

Name: CSS3 Animations, Transforms and Transitions Ultimate Guide
Rating: 4.5 (165 reviews)

Enhance User Experience, Interactive Pages, 3D Animations, Real-Life Projects and Best Practices with CSS3 Animations

Created byAlperen Talaslıoğlu

Last updated 7/2021

English

What you'll learn

Two and Three dimensional transforms: translate, scale, rotate, and skew
Bringing live and interactivity to your page with transitions
Adding advanced and complex motion to your page with keyframe animations
Discovering The Real Power of CSS3 Animations
Stunning Hover CSS3 Transitions and Effects
Elegant CSS Transformations with examples and a comprehensive project
Advanced and the most modern CSS3 Techniques
The Cutting-edge Industry Standards and best practices
Interactive Projects, Lab Sessions and Contents
Enhancing User Experience (UX) with CSS Animations

Course content

13 sections • 93 lectures • 7h 27m total length

Course Overview1:38
Setting Up the Working Environment2:04
Set up your working environment for css3 animations by installing Chrome, Atom, and a Mamp local server to test html and css.
What is Web Animation? Why to animate?2:33
Creating Our First Animation6:34

Introduction to Transforms5:40
Moving Elements using Translate Function7:55
Move elements in CSS with the translate function using the transform property, with one or two parameters, or via translateX and translateY for x, y, or both axes.
Resizing Elements using Scale Function6:49
Spinning Elements using Rotate Function7:24
Tilting Elements using Skew Function5:46
Explore the skew function to tilt elements in two-dimensional space using skew(ax, ay), skew(ax), skewX(ax), and skewY(ay). Learn angle units and practical tilting in x, y, and both axes.
Transformable Elements3:18
Explore which elements are transformable in CSS, showing that transform applies to block-level elements and inline elements become transformable when changed to inline-block, with rotation examples.
Moving the Origin of the Element5:45
Multiple Transforms on One Element2:25

Creating a Polaroid Image Card6:41
Creating the Gallery6:52
Build a polaroid image gallery with CSS transformations to rotate odd and even items, add a board-textured background, and center content while updating the title style with a larger font.
Paste Our Polaroid Images with Sticky Tapes6:36
Apply css transforms to paste sticky tapes onto polaroid images, using the before pseudo element and content property, while tweaking title colors and rotations for an engaging gallery.
Final Touches2:58

Controlling Our Transitions5:24
Defining property to Apply the Transition5:24
transition-property
Specifying How Long the Transition Will Take4:49
transition-duration
Transition Timing Functions Part 110:08
transition-timing-function
Transition Timing Functions Part 25:15
transition-timing-function
Transition Timing Functions Part 38:02
transition-timing-function
Setting Timeout Before the Transition4:31
transition-delay
Lab Session: Bringing All Transition Properties Together4:52
transition
Transition Shorthand Property4:06
Using Multiple Transitions on An Element3:49
Lab Session: Rocket Emoji Animation with Multiple Transitions6:10
Launch a rocket emoji by animating it with multiple transitions, combining rotation and a delayed margin shift with cubic bezier easing to create a smooth launch.
Which CSS properties can be transitioned?3:36
Lab Session: Adding Transition Effects to Our Polaroid Image Gallery6:50
Explore adding smooth transition effects to the polaroid image gallery by applying hover transitions, multiple transforms—rotate, scale, skew, and translate—with varied durations and per-item experimentation.

Growing and Scaling Bottom Effects9:15
Left to Right and Right to Left Effects5:21
Center to Edges Effect3:34
Edges to Center Effect6:22
Top and Bottom Left to Right and Right to Left Effects4:11
Develop CSS animations using two pseudo elements before and after to create top and bottom lines that move left-to-right and right-to-left on hover with transitions.
Top and Bottom Reverse Effect1:31
Swipe Text Effect in Vertical Direction5:20
Swipe Text Effect in Horizontal Direction2:43
Left Right Lines to Top and Bottom Effect6:04

Scale Effect - Grow and Shrink Button Size5:45
Swipe Fill Left and Right Effects7:41
Learn to create swipe fill left and right effects using a pseudo-element behind buttons, triggering left-to-right and right-to-left background fills on hover with color and text transitions.
Swipe Fill Top and Bottom Effects4:34
Slice Effect in Vertical Direction5:31
Slice Effect in Horizontal Direction3:37
Left Top and Right Bottom Corners to Full Border Effect6:05
Create an interactive button effect by using before and after pseudo elements to form small left top and right bottom borders that animate to a full border on hover.
Right Top and Left Bottom Corners to Full Border Effect2:12
Micro Interactions - Button Icons Effects8:58
Build micro interactions by animating button icons on hover, with icons sliding from bottom to top and text moving away using FontAwesome icons, absolute positioning, flexbox centering, and smooth transitions.
Circle Fill Hover Effect9:45
Explore circle fill hover effects in css3 with transforms and transitions, using a before pseudo element to create a circular fill from top-left and from bottom-right on buttons.
Mouse Position Aware Circle Fill Hover Effect4:20
Social Buttons with Hover Effects7:22

Zoom In Effect2:59
Zoom Out Effect1:41
apply a zoom out effect to images by reverse engineering the previous zoom in, using hover to return to original size with scale, via css3 animations, transforms, and transitions.
Rotate Effect2:21
Filter Effects - Sepia and Grayscale1:47
Apply sepia and grayscale filters to images with adjustable values and transitions. Toggle hover states to reveal the original color and filtered result through a smooth transition.
Caption Hover Effect6:07
Learn to build caption hover effects on images using overlays, centered captions, and opacity transitions. Add image zoom on hover, overflow handling, and bottom-aligned overlays to create engaging visual captions.

Animations2:33
Defining Keyframes5:26
@keyframes
Lab Session: Moving Around Box3:29
Specifying the Animation Name1:51
animation-name
Defining How Long the Animation Lasts1:06
animation-duration
Animation Timing Functions1:42
animation-timing-function
Lab Session: Sprite sheet animation with steps()3:41
Setting Timeout Before the Animation1:00
animation-delay
Defining How Many Times the Animation Run3:13
animation-iteration-count
Specifying the Animation Direction3:49
animation-direction
Defining Styles Before and After the animation3:07
animation-fill-mode
Pausing Animation - Controlling the Animation State1:53
animation-play-state
Animation Shorthand Property - Bringing All Animation Properties Together2:26
animation
Multiple Keyframe Animations on Element2:52

Classic Circular Border Spinner4:22
Growing Circle Spinner2:31
Create a growing circle spinner by animating a circle div with border radius 50 percent, using a grow animation from transform scale 0 to 1 and opacity 0 to 1.
Three Dots Pulse Spinner5:04
Heartbit Preloader5:17
Create a heartbeat preloader in css from scratch by forming a heart with before and after pseudo elements, rotating it with border radius and applying a pulsing animation.
Rotating Squares Preloader3:56
build a rotating squares preloader with before and after pseudo elements, absolute positioning, white borders, and a two-second animation that spins clockwise and in reverse for a captivating loading indicator.
Wave Preloader5:13
Create a wave preloader using CSS3 animations, transforms, and transitions. Build a wave container with stepped heights, translateY motion, color changes, and delays to form a bidirectional wave.
Colorful Center Squares Preloader8:40
Develop a four-square colorful center squares preloader using css3 animations, transforms, and transitions, employing translate for performance and keyframes to circle each square with varied colors.
Square to Circle Rotating Spinner4:09
Clock Arrow Spinner4:29

Requirements

Basic understanding on HTML5
Basic understanding on CSS3
Basic understanding on JavaScript
Text editor for development
Modern Web Browser
Curiosity to Learn Professional Web Development Techniques
Eagerness to become an expert frontend developer

Description

# The most comprehensive CSS Animations Course in Udemy!

# Lab Sessions and Real Life Projects

# English Captions (not auto-generated)

# All resources and code samples can be downloaded

# Experienced and Responsive Author

CSS has become a very popular and essential language for ever single developer in modern web development stack and this language is continuing to evolve by having more capabilities. Nowadays, CSS can handle the majority of motion and animation needs by using CSS transitions, CSS transforms and CSS keyframe animations.

In this course, we will cover all of the key points of adding motion to your designs and web pages together. The course will show you how to work with transforms, transitions, and keyframe animations in modern browsers.

Every topics are supported by comprehensive CSS3 Transform, Transition and Keyframe Animation examples, projects and also lab sessions are added to support and reinforce the learning curve.

So to become a CSS expert and a good web developer, you have to understand the fundamental topics very clearly. The most important topics of CSS Animations are included in this course to make everything clear in your mind.

The topic covered in the course are mainly :

What CSS transforms are and how to use them
Understanding 2d transformations: translate(), scale(), rotate(), and skew()
Bringing life to the page with transitions
Simple and advanced transition effects
What you can and can’t transition and animate
Understanding the shorthand syntax of CSS transition properties
CSS transition timing functions
How to animate with CSS using keyframes
The animation properties and syntax details
Understanding 3d transforms: translate3d(), scale3d(), rotate3d(), and skew3d()
Perspective

At the end of this course, you'll have gained a better understanding of the capabilities and potentials of CSS Transformations, Transitions and Animations.

Don't forget! Small Interactions Big Impacts

Who this course is for:

Complete beginners who wants to enhance their skillsets
Frontend Developers and Designers
Professionals who wants to level up CSS skills
Experts who wants to reinforce themselves
Anyone who wants to refresh knowledge
Developers who are tired of fighting with CSS

CSS3 Animations, Transforms and Transitions Ultimate Guide

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 13min

Transforms8 lectures • 45min

Project: Polaroid Image Gallery4 lectures • 23min

Transitions13 lectures • 1hr 13min

Project: Creative Link Effects9 lectures • 44min

Project: Cool Button Effects11 lectures • 1hr 6min

Project: Image Hover Effects5 lectures • 15min

Keyframe Animations14 lectures • 38min

Project: Pure CSS Spinners and Preloaders9 lectures • 44min

Project: Real Life Animations4 lectures • 27min

Requirements

Description

Who this course is for: