Level Up Your CSS Animation Skills
4.5 (283 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
24,660 students enrolled

Level Up Your CSS Animation Skills

A practical guide to creating amazing CSS animation on the web
Bestseller
4.5 (283 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
24,660 students enrolled
Last updated 4/2019
English
English [Auto-generated]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 2 articles
  • 29 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Expand all 32 lectures 03:42:53
+ Build an animated hero header
7 lectures 49:02
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
+ Touch and hover animations
6 lectures 46:54
Animating links
12:26
Animating tooltips
11:11
Revealing content on hover
11:38
Animating buttons
08:59
Examples to download
01:02
+ Scroll and parallax animations
6 lectures 45:38
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
+ Animated carousel
7 lectures 54:57
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
+ Adjusting animations to screen sizes
4 lectures 23:13
Resizing animations using font-size
08:50
Percentages and viewport units
06:01
Landscape vs portrait
06:39
+ Congratulations!
2 lectures 03:08
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!