Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

CSS Animation: Bringing your Sites to Life

Sarah Holden, Developer & Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Videos (44m)
    • Intro

      0:50
    • Project Intro

      1:14
    • Hover Effects

      4:33
    • Intro to Transitions

      3:32
    • Adding Transitions

      4:16
    • Controlling Transitions

      3:43
    • Project Step 1

      4:29
    • Intro to Transform

      0:53
    • Rotating Elements

      2:27
    • Scaling Elements

      2:04
    • Translating Elements

      2:34
    • Skewing Elements

      1:27
    • Multiple Transforms

      1:35
    • Project Step 2

      2:48
    • Browser Prefixes

      3:41
    • Project Step 3

      2:19
    • Next Steps

      1:51

About This Class

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!

70

Students

--

Projects

Sarah Holden

Developer & Educator

Sarah Holden is a web developer, designer, and instructor based in Los Angeles.

She taught her first web development course for General Assembly in 2015, caught the bug and never looked back. She's now taught hundreds of students the basics of web development and believes wholeheartedly that learning can and should be fun.

She currently runs her own development practice and is dedicated building quality-crafted websites that are as beautiful and interactive as ...

See full profile

Technology Web Development