4.74 (1014 reviews)
☑ 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
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!
css transitions basics
what is css transitions ?
different ways to write the transition property
what properties can be transitioned
css 2D transforms
2D transforms basics
css 3D transforms
translate in 3D
rotate in 3D
css transforms creative examples
what we are going to build in this section with css transforms and transitions
creative button hover effect 1
creative button hover effect 2
creative button hover effect 3
creative button hover effect 4
creative button hover effect 5
creative button hover effect 6
creative button hover effect 7
creative button hover effect 8
creative button hover effect 9
creative button hover effect 10
creative button hover effect 11
creative button hover effect 12
creative button hover effect 13
creative button hover effect 14
image hover effect with css transforms 1
image hover effect with css transforms 2
image hover effect with css transforms 3
image hover effect with css transforms 4
image hover effect with css transforms 5
smoky text effect using css transforms
Fill Text Effect On Hover
image zoom in effect using css transforms
menu hover effect with css transforms
menu hover effect with css transitions
social media icons hover effect with css transforms
css animations and keyframes
create css animations with more stages
animation fill mode property
animation iteration count property
animation direction property
animation shorthand method
css animation creative examples
what we are going to build in this section with css animations
floating text using css animation
loading effect using css animation
driving a car and a motor bike using css animation
text rotator using css animation
animated image pattern using css animation
button shaking hover effect with css animation
animated button with css animation
lighting text with css animation
heartbeat with css animation
animated text background with css animation
bouncing balls with css animation
rain effect with css animation
Icon Hover Effects with CSS Animations
Loading Text Animation
awesome pulse effect using css animations
Simple Images Slider Show with css animations
Changing background color with css animations
newton's cradle with CSS animations
nice loading effect with CSS animations
nice loading effect with CSS animations 2
nice preloader using CSS animations
Still lot to cover but the best course so far! very good instructor with clear and easy explanation. Deserves more than 5 stars!! Thank you for this wonderful tutorial.
Very Nice course which teaches how to animate with CSS and not just in theory. The great examples show all the cool things you can do with all these animations and how to combine different things to create cool creative effects on buttons, loading screens and other cool things.
This course is a good match for anyone who wants to learn CSS-animations (keyframes) and transitions in depth. The instructor for this course has a lot of knowledge on the subject and a lot of enthousiasm for the subject. The only downside of this course is that the instructor don't leave pauses while coding and that some of the code is not semantic. But overall you cant go wrong with this course :) Highly recommend it!
Absolutely the best course I followed about css transitions and transform, an awesome teacher who explains clearly and with amazing examples. I really suggest this course and this teacher. Thank you very much.
I really like the narration and presentation so far of this course. Very Clear, concise, focused examples. Excited to continue.
he spent a lot of time starting every project as a unique, but used to be the same almost the same, only to increase the course time. he use long times of animations, only to increase the course time. And thereis a lot of animations the is the same, changing small details. this curse could be create with 1 hour.
Ahmed does a great job breaking down what appear to be complex animations. The creative examples provided in this course are will worth the purchase!
Good instructor. Clean, easy to understand examples get you quickly off the ground with CSS animations. Makes you want to experiment and try your own ideas, and gives you the tools to do so
one of the best online courses i've taken, the instructor explains everything clearly with great voice and he created many examples that increase my knowledge of css animations and made me think i can do a lot with css animations that i didn't know about before!
it was amazing how many examples and ideas the instructor covered in this course. he explained things clearly then give a lot of examples on the things explained.
very good course for any one wants to master css animations, as the course description said, i feel css animations are now very easy and make sense.
i really liked the course and the instructor style of explaining things, he goes straight to the point and doesn't waste any time talking outside the core concepts of what he is explaining, you might think that the lectures are short, i thought that at first but believe me you will have the information you want from it because the instructor doesn't waste your time like many other instructors do, i think if any other instructor teached this course he might teach it in 10 hours or so. that's why i love this course, every lecture teach you new things and animation techniques with short time. i will definitely check out his flexbox course.
I am very disappointed with this course and many of the examples are very similar. In terms of the button effect, there is absolutely no need to completely start writing from the beginning, it is better to explain in more detail.
Very good! The preparations for the videos are excellent. The course is ordered in a progressive, intuitive way way. The tutor is really engaging.
Very clear explanations and interesting examples are provided by the instructor through the course. Excellent!