Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-03-31 00:35:40
30-Day Money-Back Guarantee
Design 3D & Animation CSS Animations

Creative Advanced CSS Animations - Create 100 Projects!

Master Advanced CSS Animations, Transitions and Transforms And Practice with 100 Creative Projects
Bestseller
Rating: 4.8 out of 54.8 (945 ratings)
11,247 students
Created by Ahmed Sadek
Last updated 4/2021
English
English [Auto]
30-Day Money-Back Guarantee

What you'll 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

Requirements

  • An Internet Connection
  • Basic Understanding Of HTML & CSS
  • 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 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 80 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!

Who this course is for:

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

Featured review

Jeroen Rijsdijk
Jeroen Rijsdijk
102 courses
6 reviews
Rating: 5.0 out of 57 months ago
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!

Course content

12 sections • 123 lectures • 12h 48m total length

  • Preview03:03
  • Preview03:08
  • CSS transitions options
    06:00
  • different ways to write the transition property
    05:45
  • what properties can be transitioned ?
    01:54

  • Preview01:37
  • CSS translate function
    04:56
  • CSS scale function
    03:42
  • CSS rotate function
    02:45
  • CSS skew function
    02:17
  • transform origin
    06:24

  • translate in 3D
    05:35
  • rotate in 3D
    03:03

  • Preview02:53
  • creative rotating button effect
    06:48
  • creative swipe button effect
    07:44
  • creative button hover effect
    06:16
  • creative button stretching effect
    02:31
  • creative button swipe effect from top to bottom with text
    02:44
  • creative button glowing effect
    05:10
  • creative two layers swapping button effect
    05:38
  • creative text scaling button effect
    05:09
  • creative circular swapping button effect
    07:14
  • creative rotating 3 layers button effect
    06:22
  • creative layers swapping from left to right button effect
    07:28
  • creative 3 circles to background button effect
    14:32
  • creative button hover effect
    07:56
  • creative splitted button effect
    13:29
  • creative border swapping button effect
    11:13
  • creative border growing button effect
    06:57
  • creative first letter rotating button effect
    07:22
  • creative 4 borders growing button effect
    08:46
  • creative wavy button effect
    09:12
  • creative 2 cuts button effect
    08:21
  • creative 2 parts skewed button effect
    05:40
  • creative pulsing button effect
    05:39
  • diagonal swipe button effect using borders
    07:35

  • Preview01:34
  • creative image effect 1
    08:07
  • creative image effect 2
    03:48
  • creative image effect 3
    02:35
  • creative image effect 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

  • Preview01: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

  • Preview01: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

  • Preview00: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

  • Preview03: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

  • Preview03:39
  • 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
  • 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

Instructor

Ahmed Sadek
full stack web developer, freelancer & teacher
Ahmed Sadek
  • 4.8 Instructor Rating
  • 1,228 Reviews
  • 14,524 Students
  • 3 Courses

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 for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.