Mô tả

# 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

Bạn sẽ học được gì

Yêu cầu

Nội dung khoá học

13 sections

Introduction

4 lectures
Course Overview
01:38
Setting Up the Working Environment
02:04
What is Web Animation? Why to animate?
02:33
Creating Our First Animation
06:34

Transforms

8 lectures
Introduction to Transforms
05:40
Moving Elements using Translate Function
07:55
Resizing Elements using Scale Function
06:49
Spinning Elements using Rotate Function
07:24
Tilting Elements using Skew Function
05:46
Transformable Elements
03:18
Moving the Origin of the Element
05:45
Multiple Transforms on One Element
02:25

Project: Polaroid Image Gallery

4 lectures
Creating a Polaroid Image Card
06:41
Creating the Gallery
06:52
Paste Our Polaroid Images with Sticky Tapes
06:36
Final Touches
02:58

Transitions

13 lectures
Controlling Our Transitions
05:24
Defining property to Apply the Transition
05:24
Specifying How Long the Transition Will Take
04:49
Transition Timing Functions Part 1
10:08
Transition Timing Functions Part 2
05:15
Transition Timing Functions Part 3
08:02
Setting Timeout Before the Transition
04:31
Lab Session: Bringing All Transition Properties Together
04:52
Transition Shorthand Property
04:06
Using Multiple Transitions on An Element
03:49
Lab Session: Rocket Emoji Animation with Multiple Transitions
06:10
Which CSS properties can be transitioned?
03:36
Lab Session: Adding Transition Effects to Our Polaroid Image Gallery
06:50

Project: Creative Link Effects

9 lectures
Growing and Scaling Bottom Effects
09:15
Left to Right and Right to Left Effects
05:21
Center to Edges Effect
03:34
Edges to Center Effect
06:22
Top and Bottom Left to Right and Right to Left Effects
04:11
Top and Bottom Reverse Effect
01:31
Swipe Text Effect in Vertical Direction
05:20
Swipe Text Effect in Horizontal Direction
02:43
Left Right Lines to Top and Bottom Effect
06:04

Project: Cool Button Effects

11 lectures
Scale Effect - Grow and Shrink Button Size
05:45
Swipe Fill Left and Right Effects
07:41
Swipe Fill Top and Bottom Effects
04:34
Slice Effect in Vertical Direction
05:31
Slice Effect in Horizontal Direction
03:37
Left Top and Right Bottom Corners to Full Border Effect
06:05
Right Top and Left Bottom Corners to Full Border Effect
02:12
Micro Interactions - Button Icons Effects
08:58
Circle Fill Hover Effect
09:45
Mouse Position Aware Circle Fill Hover Effect
04:20
Social Buttons with Hover Effects
07:22

Project: Image Hover Effects

5 lectures
Zoom In Effect
02:59
Zoom Out Effect
01:41
Rotate Effect
02:21
Filter Effects - Sepia and Grayscale
01:47
Caption Hover Effect
06:07

Keyframe Animations

14 lectures
Animations
02:33
Defining Keyframes
05:26
Lab Session: Moving Around Box
03:29
Specifying the Animation Name
01:51
Defining How Long the Animation Lasts
01:06
Animation Timing Functions
01:42
Lab Session: Sprite sheet animation with steps()
03:41
Setting Timeout Before the Animation
01:00
Defining How Many Times the Animation Run
03:13
Specifying the Animation Direction
03:49
Defining Styles Before and After the animation
03:07
Pausing Animation - Controlling the Animation State
01:53
Animation Shorthand Property - Bringing All Animation Properties Together
02:26
Multiple Keyframe Animations on Element
02:52

Project: Pure CSS Spinners and Preloaders

9 lectures
Classic Circular Border Spinner
04:22
Growing Circle Spinner
02:31
Three Dots Pulse Spinner
05:04
Heartbit Preloader
05:17
Rotating Squares Preloader
03:56
Wave Preloader
05:13
Colorful Center Squares Preloader
08:40
Square to Circle Rotating Spinner
04:09
Clock Arrow Spinner
04:29

Project: Real Life Animations

4 lectures
Pure CSS Typing Effect
04:08
Auto Play Pure CSS Image Slider
07:06
Fading Overlay with Spinner
09:14
Animated progress bar - Loading Bar
06:43

New Dimension with 3D Transforms

8 lectures
What is 3D Transform?
02:08
Getting the Perspective
05:41
Perspective Origin and perspective() Function vs perspective Property
06:37
Translation in 3D
05:11
Scaling in 3D
04:03
Rotation in 3D
05:00
transform-style
03:36
Dealing with Back Faces
03:55

Project: Flipping Product Cards

3 lectures
Creating Two Sides of the Card
10:08
Combine Two Sides and Flipping the Card
06:43
Adding More Cards and More Directions
05:19

End of the Course

1 lectures
What's next?
00:43

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.