Tous les cours

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!
Moyenne
15 heures
Ce cours en libre accès vous intéresse ?

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!

Objectifs pédagogiques

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

Et si vous en faisiez votre métier ?

Suivez une des formations diplômantes de notre école 100% en ligne, et transformez vos connaissances en compétences professionnelles.

  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel

Contributeurs

Professeurs

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.

Créé par

Mis à jour le 23/01/2025
Licence

Développement

Create Modern CSS Animations

Moyenne
15 heures
Cours en libre accès