CSS3 Animations, Transforms and Transitions Ultimate Guide

CSS3 Animations, Transforms and Transitions Ultimate Guide, available at $64.99, has an average rating of 4.45, with 93 lectures, based on 89 reviews, and has 783 subscribers.

You will learn about 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 This course is ideal for individuals who are Complete beginners who wants to enhance their skillsets or Frontend Developers and Designers or Professionals who wants to level up CSS skills or Experts who wants to reinforce themselves or Anyone who wants to refresh knowledge or Developers who are tired of fighting with CSS It is particularly useful for Complete beginners who wants to enhance their skillsets or Frontend Developers and Designers or Professionals who wants to level up CSS skills or Experts who wants to reinforce themselves or Anyone who wants to refresh knowledge or Developers who are tired of fighting with CSS.

Enroll now: CSS3 Animations, Transforms and Transitions Ultimate Guide

Summary

Title: CSS3 Animations, Transforms and Transitions Ultimate Guide

Price: $64.99

Average Rating: 4.45

Number of Lectures: 93

Number of Published Lectures: 93

Number of Curriculum Items: 93

Number of Published Curriculum Objects: 93

Original Price: $99.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

# 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 stackand 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

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

Instructors

Alperen Talasl?o?lu
Professional Frontend Developer and Instructor

Rating Distribution

1 stars: 0 votes

2 stars: 1 votes

3 stars: 6 votes

4 stars: 27 votes

5 stars: 55 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!