Master Advanced CSS & jаvascript Animations, Transitions and Transforms And Practice with 140 Creative Projects

What you'll learn

master CSS & jаvascript animations, transitions and transforms

create more than 140 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

Requirements

An Internet Connection

Basic Understanding Of HTML, CSS & jаvascript

Any Code Editor Of Your Choice

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 jаvascript Animations Course. CSS & jаvascript animations are quickly becoming essential design tools ly 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 jаvascript 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 jаvascript effects section where we will be creating some more complex effects using the power of jаvascript. By the end of this course, you'll be able to understand how any web animation works, and you'll have created more than 140 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 jаvascript Animations, Transitions and Transforms Creativity Course!

Overview

Section 1: CSS transitions basics

Lecture 1 Creative Advanced CSS & jаvascript Animations - 140 Projects

Lecture 2 what is CSS transitions ?

Lecture 3 CSS transitions options

Lecture 4 different ways to write the CSS transition property

Lecture 5 what CSS properties can be transitioned ?

Section 2: CSS 2D transforms

Lecture 6 CSS 2D transforms basics

Lecture 7 CSS translate function

Lecture 8 CSS scale function

Lecture 9 CSS rotate function

Lecture 10 CSS skew function

Lecture 11 CSS transform origin property

Section 3: CSS 3D transforms

Lecture 12 CSS translate in 3D

Lecture 13 CSS rotate in 3D

Section 4: creative buttons effects using CSS transforms

Lecture 14 creative buttons effects using CSS transforms

Lecture 15 creative rotating button effect using CSS

Lecture 16 creative swipe button effect using CSS

Lecture 17 creative button hover effect using CSS

Lecture 18 creative button stretching effect using CSS

Lecture 19 creative button swipe effect from top to bottom with text using CSS

Lecture 20 creative button glowing effect using CSS

Lecture 21 creative two layers swapping button effect using CSS

Lecture 22 creative text scaling button effect using CSS

Lecture 23 creative circular swapping button effect using CSS

Lecture 24 creative rotating 3 layers button effect using CSS

Lecture 25 creative layers swapping from left to right button effect using CSS

Lecture 26 creative 3 circles to background button effect using CSS

Lecture 27 creative button hover effect using CSS

Lecture 28 creative splited button effect using CSS

Lecture 29 creative border swapping button effect using CSS

Lecture 30 creative border growing button effect using CSS

Lecture 31 creative first letter rotating button effect using CSS

Lecture 32 creative 4 borders growing button effect using CSS

Lecture 33 creative wavy button effect using CSS

Lecture 34 creative 2 cuts button effect using CSS

Lecture 35 creative 2 parts skewed button effect using CSS

Lecture 36 creative pulsing button effect using CSS

Lecture 37 diagonal swipe button effect using borders using CSS

Lecture 38 Creative 4 Lines Button Hover Effect using CSS

Lecture 39 CSS glassmorphism button hover effect using

Section 5: creative images effects using CSS transforms

Lecture 40 creative images effects using CSS transforms

Lecture 41 creative image effect using CSS 1

Lecture 42 creative image effect using CSS 2

Lecture 43 creative image effect using CSS 3

Lecture 44 creative image effect using CSS 4

Lecture 45 creative image effect 5

Lecture 46 creative image effect 6

Lecture 47 creative image effect 7

Lecture 48 creative image effect 8

Lecture 49 creative image effect 9

Lecture 50 creative image effect 10

Lecture 51 creative image effect 11

Section 6: creative menus effects using CSS transforms

Lecture 52 creative menus effects using CSS transforms

Lecture 53 creative growing borders menu effect

Lecture 54 creative background and borders menu effect

Lecture 55 creative splitted background menu effect

Lecture 56 creative 2 moving bottom borders menu effect

Lecture 57 creative blurry menu effect

Lecture 58 creative menu effect using the transition delay property

Lecture 59 2 borders and a background menu effect

Lecture 60 border sniper menu effect

Lecture 61 creative menu border rotation effect

Lecture 62 creative colorful layered menu effect

Lecture 63 creative background color menu hover effect

Lecture 64 cursor menu animation hover effect

Lecture 65 text fading menu hover effect

Section 7: creative CSS cards effects using CSS transforms

Lecture 66 creative CSS cards effects using CSS transforms

Lecture 67 background translation card effect

Lecture 68 creative expandable card effect

Lecture 69 creative captain marvel card effect

Lecture 70 creative border card effect

Lecture 71 creative double face card hover effect

Lecture 72 creative layered card hover effect

Lecture 73 creative scaling card effect

Lecture 74 creative css product card effect

Lecture 75 crative css product card effect 2

Section 8: other cool examples with CSS transforms

Lecture 76 other cool examples with CSS transforms

Lecture 77 smoky text effect using css transforms

Lecture 78 Fill Text Effect On Hover

Lecture 79 social media icons hover effect with css transforms

Lecture 80 creative rotated text border effect using CSS transforms

Lecture 81 open - close text animation effect

Lecture 82 blur & focus text hover effect

Lecture 83 text focus and blur effect

Lecture 84 stacked card hover effect

Section 9: css animations and keyframes

Lecture 85 animation introduction

Lecture 86 create css animations with more stages

Lecture 87 animation fill mode property

Lecture 88 animation iteration count property

Lecture 89 animation direction property

Lecture 90 animation shorthand method

Section 10: CSS animations creative examples

Lecture 91 CSS animations creative examples

Lecture 92 floating text using css animation

Lecture 93 rotating loading effect using css animation

Lecture 94 driving a car and a motor bike using css animation

Lecture 95 text rotator using css animation

Lecture 96 animated image pattern using css animation

Lecture 97 button shaking hover effect with css animation

Lecture 98 animated button with css animation

Lecture 99 lighting text with CSS animations

Lecture 100 heartbeat effect with CSS animations

Lecture 101 animated text background with CSS animations

Lecture 102 bouncing balls with CSS animations

Lecture 103 rain effect with CSS animations

Lecture 104 Icon Hover Effects with CSS Animations

Lecture 105 Loading Text Animation

Lecture 106 awesome pulse effect using CSS animations

Lecture 107 Simple Images Slider Show with CSS animations

Lecture 108 Changing background color with CSS animations

Lecture 109 newton's cradle effect with CSS animations

Lecture 110 nice colorful loading effect with CSS animations

Lecture 111 moving squares effect with CSS animations

Lecture 112 text reveal effect with CSS animations

Lecture 113 rotating ring loading using CSS animations

Lecture 114 line loading effect using CSS animations

Lecture 115 growing lines loading using CSS animations

Lecture 116 rings rotation loading using CSS animations

Lecture 117 fading out squares using CSS animations

Lecture 118 growing lines loading with CSS animation

Lecture 119 background boxes moving using CSS animations

Lecture 120 hexagon loader animation

Lecture 121 expanding line menu effect using CSS animations

Lecture 122 background boxes growing animation using CSS animations

Lecture 123 colorful liquid glass animation

Lecture 124 fancy border loading animation

Lecture 125 rotating glowing loader

Lecture 126 draw a line around a button with a pencil icon

Lecture 127 Creative 4 Circles Animation

Lecture 128 creative glowing loader animation

Lecture 129 cloud rain drops animation

Lecture 130 text fade in - fade out animation effect

Lecture 131 neon text reveal animation

Lecture 132 CSS creative dots loading animation

Lecture 133 animated border neon light button effect

Lecture 134 creative glassmorphism animation effect

Section 11: CSS clip path property and it's examples

Lecture 135 CSS clip path examples

Lecture 136 what is the CSS clip path property and how we can use it o create shapes

Lecture 137 creative split loading effect using CSS clip path property

Lecture 138 creative CSS wavy effect using CSS clip path property

Lecture 139 creative image hover effect using CSS clip path property

Lecture 140 creative CSS pop up effect using CSS clip path property

Lecture 141 black to white and white to black text effect using CSS clip path

Lecture 142 image to circle hover effect using CSS clip path property

Lecture 143 creative image hover effect using CSS clip path

Lecture 144 creative menu split effect using CSS clip path property

Lecture 145 creative button hover effect using CSS clip path property

Lecture 146 Creative Text Animation Using Clip Path Property

Section 12: jаvascript animation effects

Lecture 147 jаvascript effects

Lecture 148 text animation effect with jаvascript

Lecture 149 website parallax effect with jаvascript

Lecture 150 expandable card design using jаvascript

Lecture 151 colorful text animation hover effect

Lecture 152 clip path animation effect using jаvascript

Lecture 153 animation on scroll using jаvascript 1

Lecture 154 animation on scroll using jаvascript 2

Lecture 155 moving a background image on scroll using jаvascript

Lecture 156 website animated banner using jаvascript

Lecture 157 night mode road animation using jаvascript

Lecture 158 circular navigation menu using jаvascript

Lecture 159 jаvascript tab navigation animation

Section 13: Bonus Section

Lecture 160 Bonus Lecture: How to get your next course for as low as $12.99

web designers and developers who want to improve their CSS & jаvascript skills,web developers who want to master CSS & jаvascript animations and transforms and be able to create any creative animation they can think of