Level Up Your CSS Animation Skills

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

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

Instructor

Front-end web developer and animator
  • 4.6 Instructor Rating
  • 388 Reviews
  • 25,192 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.

Expected Outcomes

  1. 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 Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();
  2. 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 Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();
  3. 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 Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();
  4. 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 Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();
  5. 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 Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();
  6. 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 Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();
  7. Assembling your own animated web pages Includes pre-built examples to get started quickly Course content 6 sections • 32 lectures • 3h 42m total length Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();
  8. Includes pre-built examples to get started quickly Course content 6 sections • 32 lectures • 3h 42m total length Expand all sections Build an animated hero header 7 lectures • 49min Hero header? Preview 02:36 Animating the background Preview 12: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 Touch and hover animations 6 lectures • 47min Introducing touch and hover animations Preview 01:38 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 • 46min Introducing scroll animations Preview 01: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 Animated carousel 7 lectures • 55min Carousels Preview 01: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 Adjusting animations to screen sizes 4 lectures • 23min Responsive animations Preview 01:43 Resizing animations using font-size 08:50 Percentages and viewport units 06:01 Landscape vs portrait 06:39 Congratulations! 2 lectures • 3min 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! Show more Show less Featured review KJB PHD 72 courses 22 reviews Rating: 5.0 out of 5 a year 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. Show more Show less Instructor Donovan Hutchinson Front-end web developer and animator 4.6 Instructor Rating 388 Reviews 25,192 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. Show more Show less Udemy 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 © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777abca4ae1e678',m:'46a53bf1d59401c2351a9c0c149cce3e87b9b73a-1627743362-1800-AWnG74kZE1t5ob2LyYOkTHvOsRj+qF+B5GKUOKQ77JQXz4iYEkIB3B3liryqHPJqdMEbkUiEm++fQjbu1pXUPmzg06qamF0iKBFdsLjNboDNBcSD4dLux3ImZNvW0wSJJmvSdIPW4/l8s9x1GOfi7ru6zeEPRTON72WbvMWLa8yi',s:[0x20f6b02ae2,0xa134daef69],}})();