Udemy

Platform

English

Language

3D & Animation

Category

Creative Advanced CSS Animations - Create 100 Projects!

Master Advanced CSS Animations, Transitions and Transforms And Practice with 100 Creative Projects

4.74 (1014 reviews)

Creative Advanced CSS Animations - Create 100 Projects!

Students

13 hours

Content

May 2021

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to all SkillShare courses
EXCLUSIVE 30-DAY FREE TRIAL

What you will learn

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


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 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!



Content

css transitions basics

introduction

what is css transitions ?

transitions options

different ways to write the transition property

what properties can be transitioned

css 2D transforms

2D transforms basics

tranlsate function

scale function

rotate function

skew function

transform origin

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

animation introduction

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


Reviews

S
Sameera2 October 2020

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.

R
Roel28 September 2020

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.

J
Jeroen29 August 2020

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!

D
Domenico23 August 2020

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.

S
Stephen11 August 2020

I really like the narration and presentation so far of this course. Very Clear, concise, focused examples. Excited to continue.

T
Tota20 February 2020

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.

S
Steven28 January 2020

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!

T
Tate27 December 2019

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

A
Abdulazeez24 September 2019

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!

V
Vikas24 September 2019

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.

S
Simon24 September 2019

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.

S
Sachidanand24 September 2019

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.

J
Jerremy18 September 2019

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.

e
ec-ccs15 September 2019

Very good! The preparations for the videos are excellent. The course is ordered in a progressive, intuitive way way. The tutor is really engaging.

N
Nicolás31 August 2019

Very clear explanations and interesting examples are provided by the instructor through the course. Excellent!


Coupons

DateDiscountStatus
8/17/2019100% OFFExpired
4/12/2020100% OFFExpired
8/19/202076% OFFExpired

Related Courses

SKILLSHARE
SVGs as Code: Interactive Icons and Easy Image Manipulation
SVGs as Code: Interactive Icons and Easy Image Manipulation
SKILLSHARE
Learn SVG From Scratch and Create Awesome SVG Animations
Learn SVG From Scratch and Create Awesome SVG Animations
SKILLSHARE
How to Design Metallic Logos in 5 minutes | Rose Gold, Gold, Silver SVG Files in Adobe Illustrator
How to Design Metallic Logos in 5 minutes | Rose Gold, Gold, Silver SVG Files in Adobe Ill

1908196

Udemy ID

9/12/2018

Course created date

7/1/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram