Mô tả

Have you ever seen a web animation on codepen or on any website and then you think “Ohh that is awesome! I want to do that!” but then think it’s complex and far beyond your skills?

Well I’m here to tell you: No, it definitely is not!, I’m Ahmed Sadek, a full stack web developer and freelancer with more than 7 years of experience, and I wanna welcome you to my CSS Animations, Transitions and Transforms Creativity Course.

Css animation is quickly becoming an essential design tool that’s increasingly used to help our users understand and interact with our websites.  It’s definitely the next big step in css!  Absolutely amazing things can be done with it.  It’s literally up to your imagination!  It gives life to your website and  enhances the user experience and you know better user experience means a higher reputation and more satisfied visitors.  So css animations, transitions, and transforms are critical skills for any web developer nowadays...and I’m here to make sure you learn it the right way.

So in this course you will master css animations, transitions, and transforms, starting from scratch, and not only that, we’re also gonna get our hands dirty and create many examples together so that you will get tons of ideas, and lots of inspiration to help you create any complex animation you can think of.

We’ll start by looking at the css transition property, learning what it is and how it can give life to html elements.

Then we will move on to css transforms, which open the doors for many creative options, from moving elements around the page, to scaling and rotating them.  So we’ll talk about all the transform functions that we can use in 2D and 3D environments.

After that, we get to the fun part!  We will use all the techniques and properties we learned about the css transforms and transitions, and we’ll start building some creative examples that will give you inspiration and help you make full use of what you’ve learned!

We’ll start this section by creating some button hover effects, then some image hover effects, and so much more!

Then we will move over to css animations and keyframes, where we’ll learn everything about them and all their properties.

And finally we will move on to the last section of the course, where we will be creating many css animations examples that will kickstart your imagination and help you create any animation you can think of!

By then end of this course, you’ll be able to understand how any web animation works, and you’ll have created more than 100 different projects with different ideas that will help you increase your creativity, and stand out from other web developers.  So if you are as excited as I am, hit the enroll button, and let’s dive right in with this CSS Animations, Transitions and Transforms Creativity Course!

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

master CSS animations, transitions and transforms

create more than 100 different examples using CSS animations, transitions and transforms

be able to create any creative CSS animations they can think of

master the CSS clip-path property and learn how to use it in animating html elements

create different buttons, images, cards, loaders, menus creative effects and so much more

Yêu cầu

  • An Internet Connection
  • Basic Understanding Of HTML & CSS
  • Any Code Editor Of Your Choice

Nội dung khoá học

13 sections

CSS transitions basics

5 lectures
Creative Advanced CSS & Javascript Animations - 140 Projects
03:59
what is CSS transitions ?
03:08
CSS transitions options
06:00
different ways to write the CSS transition property
05:45
what CSS properties can be transitioned ?
01:54

CSS 2D transforms

6 lectures
CSS 2D transforms basics
01:37
CSS translate function
04:56
CSS scale function
03:42
CSS rotate function
02:45
CSS skew function
02:17
CSS transform origin property
06:24

CSS 3D transforms

2 lectures
CSS translate in 3D
05:35
CSS rotate in 3D
03:03

creative buttons effects using CSS transforms

25 lectures
creative buttons effects using CSS transforms
02:53
creative rotating button effect using CSS
06:48
creative swipe button effect using CSS
07:44
creative button hover effect using CSS
06:16
creative button stretching effect using CSS
02:31
creative button swipe effect from top to bottom with text using CSS
02:44
creative button glowing effect using CSS
05:10
creative two layers swapping button effect using CSS
05:38
creative text scaling button effect using CSS
05:09
creative circular swapping button effect using CSS
07:14
creative rotating 3 layers button effect using CSS
06:22
creative layers swapping from left to right button effect using CSS
07:28
creative 3 circles to background button effect using CSS
14:32
creative button hover effect using CSS
07:56
creative splited button effect using CSS
13:29
creative border swapping button effect using CSS
11:13
creative border growing button effect using CSS
06:57
creative first letter rotating button effect using CSS
07:22
creative 4 borders growing button effect using CSS
08:46
creative 2 cuts button effect using CSS
08:21
creative 2 parts skewed button effect using CSS
05:40
creative pulsing button effect using CSS
05:39
diagonal swipe button effect using borders using CSS
07:35
Creative 4 Lines Button Hover Effect using CSS
14:42
CSS glassmorphism button hover effect using
12:46

creative images effects using CSS transforms

12 lectures
creative images effects using CSS transforms
01:34
creative image effect using CSS 1
08:07
creative image effect using CSS 2
03:48
creative image effect using CSS 3
02:35
creative image effect using CSS 4
02:28
creative image effect 5
12:23
creative image effect 6
02:26
creative image effect 7
16:31
creative image effect 8
07:19
creative image effect 9
08:55
creative image effect 10
04:47
creative image effect 11
06:35

creative menus effects using CSS transforms

14 lectures
creative menus effects using CSS transforms
01:35
creative growing borders menu effect
05:39
creative background and borders menu effect
09:45
creative splitted background menu effect
09:58
creative 2 moving bottom borders menu effect
06:58
creative blurry menu effect
07:07
creative menu effect using the transition delay property
10:44
2 borders and a background menu effect
08:20
border sniper menu effect
09:29
creative menu border rotation effect
06:41
creative colorful layered menu effect
06:26
creative background color menu hover effect
09:14
cursor menu animation hover effect
06:53
text fading menu hover effect
07:02

creative CSS cards effects using CSS transforms

10 lectures
creative CSS cards effects using CSS transforms
01:07
background translation card effect
06:49
creative expandable card effect
06:24
creative captain marvel card effect
07:03
creative border card effect
09:22
creative double face card hover effect
11:04
creative layered card hover effect
09:47
creative scaling card effect
10:26
creative css product card effect
10:38
crative css product card effect 2
18:15

other cool examples with CSS transforms

10 lectures
other cool examples with CSS transforms
00:50
smoky text effect using css transforms
05:03
Fill Text Effect On Hover
03:20
social media icons hover effect with css transforms
09:50
creative rotated text border effect using CSS transforms
10:00
open - close text animation effect
07:04
blur & focus text hover effect
05:06
text focus and blur effect
07:54
stacked card hover effect
09:47
CSS text clip mask parallax scrolling effect
04:14

css animations and keyframes

6 lectures
animation introduction
03:31
create css animations with more stages
04:55
animation fill mode property
06:23
animation iteration count property
03:43
animation direction property
02:57
animation shorthand method
01:46

CSS animations creative examples

45 lectures
CSS animations creative examples
05:10
floating text using css animation
03:45
rotating loading effect using css animation
04:14
driving a car and a motor bike using css animation
04:56
text rotator using css animation
02:41
animated image pattern using css animation
03:46
button shaking hover effect with css animation
03:54
animated button with css animation
06:49
lighting text with CSS animations
05:20
heartbeat effect with CSS animations
07:11
animated text background with CSS animations
02:54
bouncing balls with CSS animations
06:28
rain effect with CSS animations
03:13
Icon Hover Effects with CSS Animations
08:21
Loading Text Animation
06:51
creative wavy button effect using CSS
09:12
awesome pulse effect using CSS animations
06:35
Simple Images Slider Show with CSS animations
02:39
Changing background color with CSS animations
04:28
newton's cradle effect with CSS animations
10:24
nice colorful loading effect with CSS animations
09:49
moving squares effect with CSS animations
05:28
text reveal effect with CSS animations
04:10
rotating ring loading using CSS animations
05:58
line loading effect using CSS animations
06:07
growing lines loading using CSS animations
06:16
rings rotation loading using CSS animations
08:39
fading out squares using CSS animations
06:27
growing lines loading with CSS animation
04:34
background boxes moving using CSS animations
11:12
hexagon loader animation
12:52
expanding line menu effect using CSS animations
06:36
background boxes growing animation using CSS animations
08:54
colorful liquid glass animation
11:24
fancy border loading animation
07:05
rotating glowing loader
07:37
draw a line around a button with a pencil icon
14:51
Creative 4 Circles Animation
15:28
creative glowing loader animation
08:58
cloud rain drops animation
09:02
text fade in - fade out animation effect
04:00
neon text reveal animation
09:36
CSS creative dots loading animation
08:43
animated border neon light button effect
09:10
creative glassmorphism animation effect
09:16

CSS clip path property and it's examples

12 lectures
CSS clip path examples
01:25
what is the CSS clip path property and how we can use it o create shapes
07:42
creative split loading effect using CSS clip path property
07:55
creative CSS wavy effect using CSS clip path property
06:58
creative image hover effect using CSS clip path property
07:19
creative CSS pop up effect using CSS clip path property
04:10
black to white and white to black text effect using CSS clip path
06:26
image to circle hover effect using CSS clip path property
08:32
creative image hover effect using CSS clip path
08:14
creative menu split effect using CSS clip path property
10:50
creative button hover effect using CSS clip path property
06:22
Creative Text Animation Using Clip Path Property
10:19

javascript animation effects

19 lectures
javascript effects
03:26
text animation effect with javascript
08:05
website parallax effect with javascript
15:32
expandable card design using javascript
14:12
colorful text animation hover effect
06:47
clip path animation effect using javascript
07:27
animation on scroll using javascript 1
10:08
animation on scroll using javascript 2
03:11
moving a background image on scroll using javascript
04:04
website animated banner using javascript
10:41
night mode road animation using javascript
11:14
circular navigation menu using javascript
10:10
javascript tab navigation animation
13:05
CSS skew on scroll effect using javascript
05:03
video slider using javascript
07:59
create a cool glitch effect using javascript
06:57
split screen on scroll using javascript
06:42
toggle action menu using javascript
13:03
9 dots toggle menu using javascript
13:47

Last Words

1 lectures
Bonus Lecture: How to get your next course for as low as $12.99
00:18

Đá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.