All courses

Développement

Create Modern CSS Animations

By animating elements of a web page, we can guide the attention of our visitors, creating a more fluid user experience. Take your CSS skills to the next level and bring your web pages to life with modern CSS animations!
DifficultyMedium15 hours
Interested in this free-access course?

Hey, what's that green and blue graphic doing? Moving? You mean there's motion coded right into CSS?? Let's have a nice close look. Can you see the code yet? Look closer. Closer... 

Okay, if I haven't hypnotized you yet, have I at least got your attention? Or better yet, are you interested in getting the attention of your website visitors? That's the beauty of web animations!

You've worked hard to build your CSS skills. Time to have some fun. Really, you've earned it. Buried deep in your CSS-coding fingertips is some pretty awesome potential to inject your page elements with life! All you need is to explore what makes a quality animation with the help of the 12 Principles of Animation, and to expand your CSS tool belt with:

  • Transform() functions

  • Pseudo-elements

  • @keyframes 

  • Opacity, iteration, and direction properties

We'll even cover how to add user interactivity:

And don't think animation is just for decoration. Let's enhance the user experience of your sites by jazzing up ordinary user actions!

Ready to dive in and bring your web pages to life?

Yeah, I thought so. 😁 Let's get started!

Learning outcomes

  • Apply the 12 Principles of Animation
  • Implement simple CSS transitions

Turn it into a career

Take one of our 100% online diploma training programs, and transform your know-how into professional skills.

  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring

Contributors

Instructors

Pat Gerke

Developer, animator, designer, and globetrotter

Max Wardeh

Experienced developer leading the architecture, development and delivery of web and mobile projects globally and in multiple languages.

Created by

Last updated: 1/23/2025

License

Développement

Create Modern CSS Animations

DifficultyMedium15 hours
Free-access course