Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Level Up Your CSS Animation Skills

Name: Level Up Your CSS Animation Skills
Rating: 4.4 (458 reviews)

A practical guide to creating amazing CSS animation on the web

Created byDonovan Hutchinson

Last updated 3/2021

English

English [Auto],

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

Hero header?2:36
Create an engaging hero header using large images or videos with animated effects to quickly convey your site's purpose while optimizing load time, timing, and key frames.
Animating the background12:56
Master the background animation for a landing header by using a pseudo element, multiple backgrounds with a linear gradient, and a custom cubic-bezier animation that fades and slides in.
Introducing the titles9:59
Explore building a reusable animate pop in class to stagger hero content with keyframes that adjust opacity, translate, scale, and rotate, using delays and a bouncy cubic-bezier timing.
Adding a scroll cue8:26
Add a subtle scroll cue by animating a chevron at the bottom of the page with fade slide up and pulse animations, combining multiple keyframes and ensuring Safari compatibility.
Simplifying keyframes5:20
Streamline keyframes by building a general, reusable set that covers fade down, fade up, and pop in, and apply them with the animation property to control timing and direction.
Waiting till the content is ready8:43
trigger the load event to start animations only after content loads, using animation play state with a js loading class to pause until the page is ready.
Examples to download1:02
Downloadable examples showcase practical css animation techniques to help you level up your animation skills and apply them to real projects.

Introducing touch and hover animations1:38
Explore touch and hover interactions on web pages and apps by animating anchor underlines, tooltips over text, and all button states with efficient css transitions.
Animating links12:26
Learn to style and animate link underlines using transitions and keyframes, with hover states and the :after pseudo element.
Animating tooltips11:11
Learn to create and animate tooltips for links using the title attribute, generating tooltips with javascript, and apply multi-property transitions on hover with visibility and transform for accessible, non-blocking tooltips.
Revealing content on hover11:38
Reveal content on hover by coordinating transitions and transforms, using JavaScript and jQuery to toggle a highlighted state and show more info and call-to-action blocks.
Animating buttons8:59
Learn to build an animated button with hover and active states using pseudo elements for a shadow and color, plus transitions for smooth motion.
Examples to download1:02
Download CSS animation examples to level up your animation skills with practical practice, techniques, and workflows.

Introducing scroll animations1:50
Explore scroll-triggered animations with a custom JavaScript tool to fade in content, reveal photos and pull quotes, add parallax effects, an end-of-page slider, and a window that appears after scrolling.
Animating content on scroll14:52
Learn to reveal content on scroll using requestAnimationFrame, detect elements in the viewport, apply is-visible classes with transitions and the will-change property to animate header and images.
Animating a slide-in banner6:17
Level up your css animation skills by building a slide-in banner that appears on scroll with a class-based utility, using absolute positioning, rotation, transitions, scrawl or animator on scroll.
Parallax scrolling10:57
Explore parallax scrolling and on scroll animations using relax to move elements at different speeds, creating depth on a landing page and engaging header, rocks, and text.
Mouse-leave animation10:40
Detect when the mouse leaves the viewport and trigger a modal with a CSS animation, using jQuery and session storage to avoid showing it repeatedly.
Examples to download1:02
Discover downloadable examples that showcase practical CSS animation techniques to level up your skills, with ready-to-use code snippets and step-by-step demonstrations.

Carousels1:49
Build an animated carousel using JavaScript to manage user interface state and transitions, featuring a Bill Murray quotes set and interactive quote selection for practical data streams or grouped information.
Carousel HTML6:36
Plan and build a quote carousel using HTML, CSS, and JavaScript. Define a structured container and list with previous, current, and next states, plus dynamically generated navigation pips.
Carousel CSS12:41
Learn to style a quotes carousel with csx, animate between previous, current, and next states using transforms and opacity, and build the progress indicator pips.
Setting up the JavaScript9:59
Set up a JavaScript engine to drive a looping carousel by managing current, previous, next indices and state, enabling automatic movement and click or pip controls.
Making it work16:12
Continue building a JavaScript carousel by implementing show next and show quote functions. Update current, previous, and next indices and apply classes to animate transitions and pips.
Finishing touches6:40
Pause the carousel on user interaction, using setTimeout and a visibility change listener to pause when the document is hidden and resume after a 10-second restart, ensuring smooth reading.
Examples to download1:00
Downloadable css animation examples help you level up your skills by practicing key motion techniques and applying ready-to-use demonstrations.

Responsive animations1:43
Learn to create responsive, scalable animations for phones, tablets, desktops, and VR using relative units, font-size rules, media queries, percentages, and viewport units (vmin) across portrait and landscape orientations.
Resizing animations using font-size8:50
Resize animations using font size shows how the m unit scales an animation by font size, resizing shapes and borders, with media queries adapting it across viewports.
Percentages and viewport units6:01
Explore how percentages and viewport units power responsive CSS animations, replacing media queries with percent-based sizing and viewport sizing to keep shapes centered and scaled on any screen.
Landscape vs portrait6:39
Explore how to adapt CSS animations to device orientation using media queries for portrait and landscape. See how animations and titles switch based on orientation for responsive visuals.

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!

Level Up Your CSS Animation Skills

What you'll learn

Explore related topics

Course content

Build an animated hero header7 lectures • 49min

Touch and hover animations6 lectures • 47min

Scroll and parallax animations6 lectures • 46min

Animated carousel7 lectures • 55min

Adjusting animations to screen sizes4 lectures • 23min

Congratulations!2 lectures • 3min

Requirements

Description

Who this course is for: