CSS Animation: Bringing your Sites to Life

Dive into the world of CSS animation with Sarah Holden and learn how to add dynamic, polished interactions to your sites. In this 45-minute course you'll learn how to use CSS hover effects, transitions, and transforms to add motion and interactivity that will impress your users and bring your sites to life.

This hands-on course is geared for those who feel comfortable writing basic HTML and CSS and want to kick their skills up a notch. In the course project you'll explore various animation techniques by creating an interactive image gallery with animated hover effects.

What you'll learn:

• Adding Hover Effects: Learn how to update styles for buttons, anchors, images, and other elements when a user hovers over them
• CSS Transitions: Control animation speed using CSS transitions
• CSS Transforms: Utilize CSS transforms to rotate, skew, scale, and move elements on a page
• Browser Prefixes: Make sure that animations work in the widest number of browsers possible by adding browser prefixes

What you'll make:

In the course project you'll create personalized hover animations for an image gallery. You can add this image gallery to your site today, or use the animation techniques you've learned to create hover effects for buttons, anchors, images...anything on your site!

Thanks for joining! I love CSS animations and I can't wait to share this content with you so that you can harness your creativity and start adding animations and interactions to your pages today!

• Intro
• Project Intro
• Hover Effects
• Intro to Transitions
• Adding Transitions
• Controlling Transitions
• Project Step 1
• Intro to Transform
• Rotating Elements
• Scaling Elements
• Translating Elements
• Skewing Elements
• Multiple Transforms
• Project Step 2
• Browser Prefixes
• Project Step 3
• Next Steps