Creative Advanced CSS & JavaScript Animations - 150 Projects

Focused View

Ahmed Sadek

15:24:30

8 View

1. CSS transitions basics

1. Creative Advanced CSS & Javascript Animations - 140 Projects.mp4

03:59

2.1 what is css transitions.zip

2. what is CSS transitions .mp4

03:08

3.1 transitions options.zip

3. CSS transitions options.mp4

06:00

4.1 different ways to write the transitions.zip

4. different ways to write the CSS transition property.mp4

05:45

5.1 what properties can be transitioned.zip

5. what CSS properties can be transitioned .mp4

01:54

2. CSS 2D transforms

1.1 2D transform basics.zip

1. CSS 2D transforms basics.mp4

01:37

2.1 tranlsate+function.zip

2. CSS translate function.mp4

04:56

3.1 scale.zip

3. CSS scale function.mp4

03:42

4.1 rotate.zip

4. CSS rotate function.mp4

02:45

5.1 skew.zip

5. CSS skew function.mp4

02:17

6.1 transform origin.zip

6. CSS transform origin property.mp4

06:24

3. CSS 3D transforms

1.1 translate in 3D.zip

1. CSS translate in 3D.mp4

05:35

2.1 rotate in 3D.zip

2. CSS rotate in 3D.mp4

03:03

4. creative buttons effects using CSS transforms

5. creative images effects using CSS transforms

1. creative images effects using CSS transforms.mp4

01:34

2.1 image hover effect with css transforms 1.zip

2. creative image effect using CSS 1.mp4

08:07

3.1 image hover effect with css transforms 2.zip

3. creative image effect using CSS 2.mp4

03:48

4.1 image hover effect with css transforms 3.zip

4. creative image effect using CSS 3.mp4

02:35

5.1 image-hover-effect-with-css-transforms-4.zip

5. creative image effect using CSS 4.mp4

02:28

6.1 image hover effect with css transforms 5.zip

6. creative image effect 5.mp4

12:23

7.1 image zoom in effect using css transforms.zip

7. creative image effect 6.mp4

02:26

8.1 creative image hover effect 1.zip

8. creative image effect 7.mp4

16:31

9.1 creative image hover effect 2.zip

9. creative image effect 8.mp4

07:19

10.1 creative image hover effect 3.zip

10. creative image effect 9.mp4

08:55

11.1 creative image hover effect 4.zip

11. creative image effect 10.mp4

04:47

12.1 creative image hover effect 5.zip

12. creative image effect 11.mp4

06:35

6. creative menus effects using CSS transforms

1. creative menus effects using CSS transforms.mp4

01:35

2.1 menu+hover+effect+with+css+transforms.zip

2. creative growing borders menu effect.mp4

05:39

3.1 New fomenu hover effect with css transitions.zip

3. creative background and borders menu effect.mp4

09:45

4.1 creative button hover effect 8.zip

4. creative splitted background menu effect.mp4

09:58

5.1 cool menu hover effect.zip

5. creative 2 moving bottom borders menu effect.mp4

06:58

6.1 creative blurry menu effect.zip

6. creative blurry menu effect.mp4

07:07

7.1 creative menu effect using the transition delay property.zip

7. creative menu effect using the transition delay property.mp4

10:44

8.1 2 borders and a background menu effect.zip

8. 2 borders and a background menu effect.mp4

08:20

9.1 border sniper menu effect.zip

9. border sniper menu effect.mp4

09:29

10.1 creative menu border rotation effect.zip

10. creative menu border rotation effect.mp4

06:41

11.1 creative colorful layered menu effect.zip

11. creative colorful layered menu effect.mp4

06:26

12.1 creative background color menu hover effect.zip

12. creative background color menu hover effect.mp4

09:14

13.1 cursor menu animation hover effect.zip

13. cursor menu animation hover effect.mp4

06:53

14.1 MenuHoverEffects-20230106T081435Z-001.zip

14. text fading menu hover effect.mp4

07:02

7. creative CSS cards effects using CSS transforms

1. creative CSS cards effects using CSS transforms.mp4

01:07

2.1 background translation card effect.zip

2. background translation card effect.mp4

06:49

3.1 creative expandable card effect.zip

3. creative expandable card effect.mp4

06:24

4.1 creative captain marvel card effect.zip

4. creative captain marvel card effect.mp4

07:03

5.1 creative border card hover effect.zip

5. creative border card effect.mp4

09:22

6.1 creative double face card hover effect.zip

6. creative double face card hover effect.mp4

11:04

7.1 creative layered card hover effect.zip

7. creative layered card hover effect.mp4

09:47

8.1 creative scaling card effect.zip

8. creative scaling card effect.mp4

10:26

9.1 ProductCard002-20230129T165438Z-001.zip

9. creative css product card effect.mp4

10:38

10.1 crative css product card effect 2.zip

10. crative css product card effect 2.mp4

18:15

8. other cool examples with CSS transforms

1. other cool examples with CSS transforms.mp4

00:50

2.1 smoky.zip

2. smoky text effect using css transforms.mp4

05:03

3.1 Fill Text Effect On Hover.zip

3. Fill Text Effect On Hover.mp4

03:20

4.1 social media icons hover effect with css transforms.zip

4. social media icons hover effect with css transforms.mp4

09:50

5.1 creative rotated text border effect using CSS transforms.zip

5. creative rotated text border effect using CSS transforms.mp4

10:00

6.1 open - close text animation effect.zip

6. open - close text animation effect.mp4

07:04

7.1 BlurFocus2-20230129T170313Z-001.zip

7. blur & focus text hover effect.mp4

05:06

8. text focus and blur effect.mp4

07:54

9. stacked card hover effect.mp4

09:47

9. css animations and keyframes

1.1 animation introduction.zip

1. animation introduction.mp4

03:31

2.1 more stages.zip

2. create css animations with more stages.mp4

04:55

3.1 animation fill mode.zip

3. animation fill mode property.mp4

06:23

4.1 animation iteration count.zip

4. animation iteration count property.mp4

03:43

5.1 animation direction.zip

5. animation direction property.mp4

02:57

6.1 animation shorthand method.zip

6. animation shorthand method.mp4

01:46

10. CSS animations creative examples

1. CSS animations creative examples.mp4

07:15

2.1 floating text using css animation.zip

2. floating text using css animation.mp4

03:45

3.1 loading effect using css animation.zip

3. rotating loading effect using css animation.mp4

04:14

4.1 driving a car and a motor bike using css animation.zip

4. driving a car and a motor bike using css animation.mp4

04:56

5.1 text rotator using css animation.zip

5. text rotator using css animation.mp4

02:41

6.1 animated image pattern using css animation.zip

6. animated image pattern using css animation.mp4

03:46

7.1 button shaking hover effect with css animation.zip

7. button shaking hover effect with css animation.mp4

03:54

8.1 animated button with css animation.zip

8. animated button with css animation.mp4

06:49

9.1 lighting text with css animation.zip

9. lighting text with CSS animations.mp4

05:20

10.1 heartbeat with css animation.zip

10. heartbeat effect with CSS animations.mp4

07:11

11.1 animated text background with css animation.zip

11. animated text background with CSS animations.mp4

02:54

12.1 bouncing balls with css animation.zip

12. bouncing balls with CSS animations.mp4

06:28

13.1 rain effect with css animation.zip

13. rain effect with CSS animations.mp4

03:13

14.1 Icon Hover Effects with CSS Transitions and Animations.zip

14. Icon Hover Effects with CSS Animations.mp4

08:21

15.1 Loading Text Animation.zip

15. Loading Text Animation.mp4

06:51

16.1 awesome pulse effect using css animations.zip

16. awesome pulse effect using CSS animations.mp4

06:35

17.1 Simple Images Slider Show with css animations.zip

17. Simple Images Slider Show with CSS animations.mp4

02:39

18.1 Changing background color with css animations.zip

18. Changing background color with CSS animations.mp4

04:28

19.1 cradle.zip

19. newtons cradle effect with CSS animations.mp4

10:24

20.1 nice loading effect with CSS animations.zip

20. nice colorful loading effect with CSS animations.mp4

09:49

21.1 nice loading effect with CSS animations 2.zip

21. moving squares effect with CSS animations.mp4

05:28

22.1 nice preloader using CSS animations.zip

22. text reveal effect with CSS animations.mp4

04:10

23.1 ring loading effect.zip

23. rotating ring loading using CSS animations.mp4

05:58

24.1 line loading effect.zip

24. line loading effect using CSS animations.mp4

06:07

25.1 nice loading effect.zip

25. growing lines loading using CSS animations.mp4

06:16

26.1 nice loading effect with CSS animations 7.zip

26. rings rotation loading using CSS animations.mp4

08:39

27.1 nice loading effect with CSS animations 8.zip

27. fading out squares using CSS animations.mp4

06:27

28.1 growing lines loading with CSS animation.zip

28. growing lines loading with CSS animation.mp4

04:34

29.1 animated background using CSS animations.zip

29. background boxes moving using CSS animations.mp4

11:12

30.1 hexagon loader animation.zip

30. hexagon loader animation.mp4

12:52

31.1 expanding line menu effect using CSS animations.zip

31. expanding line menu effect using CSS animations.mp4

06:36

32.1 background boxes growing animation using CSS animations.zip

32. background boxes growing animation using CSS animations.mp4

08:54

33.1 colorful liquid glass animation.rar

33. colorful liquid glass animation.mp4

11:24

34.1 fancy border loading animation.zip

34. fancy border loading animation.mp4

07:05

35.1 rotating glowing loader.zip

35. rotating glowing loader.mp4

07:37

36.1 Draw Line Around Button on Hover Html CSS Animation Effect.zip

36. draw a line around a button with a pencil icon.mp4

14:51

37.1 Creative 4 Circles Animation.zip

37. Creative 4 Circles Animation.mp4

15:28

38.1 creative glowing loader animation.zip

38. creative glowing loader animation.mp4

08:58

39.1 cloud rain drops animation.zip

39. cloud rain drops animation.mp4

09:02

40.1 text fade in - fade out animation effect.zip

40. text fade in - fade out animation effect.mp4

04:00

41.1 neon text reveal animation.zip

41. neon text reveal animation.mp4

09:36

42.1 CSS creative dots loading animation.zip

42. CSS creative dots loading animation.mp4

08:43

43.1 animated border neon light button effect.zip

43. animated border neon light button effect.mp4

09:10

44.1 creative glassmorphism animation effect.zip

44. creative glassmorphism animation effect.mp4

09:16

11. CSS clip path property and its examples

1. CSS clip path examples.mp4

01:25

2. what is the CSS clip path property and how we can use it o create shapes.mp4

07:42

3.1 creative split loading effect using CSS clip path property.zip

3. creative split loading effect using CSS clip path property.mp4

07:55

4.1 creative CSS wavy effect using CSS clip path property.zip

4. creative CSS wavy effect using CSS clip path property.mp4

06:58

5.1 creative image hover effect using CSS clip path property.zip

5. creative image hover effect using CSS clip path property.mp4

07:19

6.1 creative CSS pop up effect using CSS clip path property.zip

6. creative CSS pop up effect using CSS clip path property.mp4

04:10

7.1 black to white and white to black text effect using CSS clip path.zip

7. black to white and white to black text effect using CSS clip path.mp4

06:26

8.1 image to circle hover effect using CSS clip path property.zip

8. image to circle hover effect using CSS clip path property.mp4

08:32

9.1 creative image hover effect using CSS clip path.zip

9. creative image hover effect using CSS clip path.mp4

08:14

10.1 creative menu split effect using CSS clip path property.zip

10. creative menu split effect using CSS clip path property.mp4

10:50

11.1 creative button hover effect using CSS clip path property.zip

11. creative button hover effect using CSS clip path property.mp4

06:22

12.1 Creative Text Animation Using Clip Path Property.zip

12. Creative Text Animation Using Clip Path Property.mp4

10:19

12. javascript animation effects

1. javascript effects.mp4

02:18

2.1 text animation effect with javascript.zip

2. text animation effect with javascript.mp4

08:05

3.1 website parallax effect with javascript.zip

3. website parallax effect with javascript.mp4

15:32

4.1 expandable card design using javascript.zip

4. expandable card design using javascript.mp4

14:12

5.1 colorful text animation hover effect.zip

5. colorful text animation hover effect.mp4

06:47

6.1 clip path animation effect using javascript.zip

6. clip path animation effect using javascript.mp4

07:27

7.1 animation on scroll using javascript 1.zip

7. animation on scroll using javascript 1.mp4

10:08

8. animation on scroll using javascript 2.mp4

03:11

9.1 moving a background image on scroll using javascript.zip

9. moving a background image on scroll using javascript.mp4

04:04

10.1 website animated banner using javascript.zip

10. website animated banner using javascript.mp4

10:41

11.1 night mode road animation using javascript.zip

11. night mode road animation using javascript.mp4

11:14

12.1 circular navigation menu using javascript.zip

12. circular navigation menu using javascript.mp4

10:10

13. javascript tab navigation animation.mp4

13:05

13. Bonus Section

1. Bonus Lecture How to get your next course for as low as $12.99.html

Description

Master Advanced CSS & JavaScript Animations, Transitions and Transforms And Practice with 150 Creative Projects!

What You'll Learn?

master CSS & Javascript animations, transitions and transforms
create more than 150 different examples using CSS animations, transitions and transforms
create different buttons, images, cards, loaders, menus creative effects and so much more
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

Who is this for?

web designers and developers who want to improve their CSS & Javascript skills

web developers who want to master CSS & Javascript animations and transforms and be able to create any creative animation they can think of

What You Need to Know?

An Internet Connection

Basic Understanding Of HTML, CSS & Javascript

Any Code Editor Of Your Choice

More details

Description
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 and JavaScript Animations Course.

CSS & Javascript animations are quickly becoming essential design tools increasingly used to help our users understand and interact with our websites.Â they are definitely the next big step in web design! Absolutely amazing things can be done with it.Â Itâ€™s literally up to your imagination!Â they give life to your website andÂ enhance the user experience and you know better user experience means a higher reputation and more satisfied visitors.Â So CSS and Javascript animations 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 button hover effects, image hover effects, menus effects, cards effectsÂ and some more different cool examples!

Then we will move over to CSS animations and keyframes, where weâ€™ll learn everything about them and all their properties.
after that we will move on to the 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!

then we will move forward to the clip path effects section where we will learn all about CSS clip path property and how we can use it to create some really creative examples and effects.

and finally we will take our skills to the next level by moving to the javascript effects section where we will be creating some more complex effects using the power of javascript.

By the end of this course, youâ€™ll be able to understand how any web animation works, and youâ€™ll have created more than 150 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 and Javascript Animations, Transitions and Transforms Creativity Course!
Who this course is for:
web designers and developers who want to improve their CSS & Javascript skills
web developers who want to master CSS & Javascript animations and transforms and be able to create any creative animation they can think of

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, it's Ahmed, glad you made it here!i'm a senior web developer working as a freelancer for the last 7 years, i've developed hundreds of web projects and have tens of happy clients.i've helped companies of all sizes to improve their business.i can't wait to share all the web development knowledge i have with students here in udemy so if you're interested in learning modern web development technology we will see each other inside my courses.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.