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+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native 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 Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development CSS Animations

Level Up Your CSS Animation Skills

A practical guide to creating amazing CSS animation on the web
Rating: 4.5 out of 54.5 (369 ratings)
25,045 students
Created by Donovan Hutchinson
Last updated 4/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Building an animated landing page
  • Stand out with an animated hero header
  • Hover, touch and button animations
  • Create scroll and parallax animations
  • Build your very own animated carousel
  • Explore responsive animations
  • Assembling your own animated web pages
  • Includes pre-built examples to get started quickly

Course content

6 sections • 32 lectures • 3h 42m total length

  • Preview02:36
  • Preview12:56
  • Introducing the titles
    09:59
  • Adding a scroll cue
    08:26
  • Simplifying keyframes
    05:20
  • Waiting till the content is ready
    08:43
  • Examples to download
    01:02

  • Preview01:38
  • Animating links
    12:26
  • Animating tooltips
    11:11
  • Revealing content on hover
    11:38
  • Animating buttons
    08:59
  • Examples to download
    01:02

  • Preview01:50
  • Animating content on scroll
    14:52
  • Animating a slide-in banner
    06:17
  • Parallax scrolling
    10:57
  • Mouse-leave animation
    10:40
  • Examples to download
    01:02

  • Preview01:49
  • Carousel HTML
    06:36
  • Carousel CSS
    12:41
  • Setting up the JavaScript
    09:59
  • Making it work
    16:12
  • Finishing touches
    06:40
  • Examples to download
    01:00

  • Preview01:43
  • Resizing animations using font-size
    08:50
  • Percentages and viewport units
    06:01
  • Landscape vs portrait
    06:39

  • Next steps and inspiration
    02:48
  • Thanks, and stay in touch!
    00:20

Requirements

  • You should know a little CSS and JavaScript
  • Mac or PC, with a text editor for editing and browser for testing

Description

Bring animation to your websites and stand out from the rest. By the end of this course you'll have the skills and confidence to build impressive animated landing pages.

Through almost 4 hours of high quality video lessons, I'll guide you through building animated hover and button animations, activate animations on scroll, make use of parallax animations, responsive animations and more.

Each section includes fully working examples that you can apply to real-world projects. Learn practical skills you can apply to future work.

The perfect primer for anyone who’s looking to add animations to their websites. It was the perfect balance of theory and practical examples and I recommend it highly.

- Andrew Clarke, Author of Hardboiled Web Design

Now is the time to learn CSS animation

As browsers (including mobile) continue to get more powerful, we have more opportunities than ever to bring animation into our designs. At the same time, quality user experience is a massive differentiating factor for web and app-based businesses.

Adding the right animation to your designs will help your sites and apps shine and help your apps stand out from the rest.

Who this course is for

You want to delight and amaze your visitors, and make your websites stand out from the rest. You want to use animation not just to wow, but also to help make your sites more useful, polished and professional. You're already creating websites but you want to take your knowledge to the next level. This is the course for you. This course will give you the practical tools you need to bring animation to your projects.

This is a video course full of real downloadable code examples. You'll be able to take the knowledge, as well as the real working code, to your projects and make sure they stand out.

Learn by doing

Most courses concentrate only on the theory. In this course we’ll create a practical example landing page, step by step. Over 6 modules of practical, hands-on lessons, we’ll create real examples of animation you can use on your own projects.

Help and inspiration

Not only do you get a load of practical, useful starting projects in this course, you can also head over to CSSAnimation.rocks for more, and even sign up to a weekly newsletter packed full of tutorials, inspiration and tips for animating on the web.

- Donovan

Who this course is for:

  • Web designers and developers
  • Anyone who wants to build amazing animated web sites and apps!

Featured review

KJB PHD
KJB PHD
61 courses
19 reviews
Rating: 5.0 out of 511 months ago
One of the best course I have taken in any subject, on any platform. I would recommend this course to anyone interested in improving their designs. I thought the pacing was well done, as was the practicality of the projects. I look forward to implementing some of what I learned on a few pet projects that need some dazzle. Thank you for the course. I wish you would do more.

Instructor

Donovan Hutchinson
Front-end web developer and animator
Donovan Hutchinson
  • 4.5 Instructor Rating
  • 369 Reviews
  • 25,045 Students
  • 1 Course

Donovan Hutchinson has been creating web pages and apps for clients for over 20 years. He writes and builds CSS animation tutorials on CSSAnimation.rocks, and has been published in Net Magazine, Smashing Magazine, Adobe Inspire, Modern Web and more.

As well as writing for online publications, Donovan writes and publishes books on front-end development and design, with a focus on animation and user experience.

You can find Donovan on Twitter as @donovanh, and follow CSS animation news at @cssanimation.

  • 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.