Vous utilisez un navigateur obsolète, veuillez le mettre à jour.

  • Aller au contenu
  • Choisir la langue
  • Aller à la recherche

OpenClassrooms devient une université américaine accréditée.

Découvrez ce que cela change pour vous
OpenClassrooms.comOpenClassrooms.com
Nos formations
100% en ligne et à votre rythme.
Comparer nos formations
Apprendre un métier
Formations diplômantes
Apprenez un métier d’avenir grâce à des projets concrets et un mentor individuel.
Découvrir un sujet
Cours en libre accès
Développez vos connaissances avec plus de 500 cours régulièrement mis à jour
Pour les employeurs
Formez et recrutez des talents grâce à un espace tout-en-un.
Découvrir notre solution
Formation & reconversion
Développer les connaissances
Bibliothèque de +500 cours en autonomie - SPARK
Booster les compétences
Programmes intensifs mentorés - BOOST
Accompagner les reconversions
Parcours de formation mentorés - PIVOT
Créez des animations CSS modernes

Table des matières

  • Partie 1

    Réalisez vos premières animations CSS

    • 1

      Découvrez les animations web

    • 2

      Créez des animations simples avec les transitions

    • 3

      Déclenchez vos transitions avec les pseudoclasses

    • 4

      Appliquez les 12 principes de l’animation au web

    • 5

      Créez des transitions CSS à propriétés multiples

    • 6

      Créez des animations plus naturelles avec les fonctions de timing

    • Quiz : Réalisez vos premières animations CSS

  • Partie 2

    Maîtrisez les translations, les rotations et l’opacité

    • 1

      Optimisez les performances de votre navigateur pour vos animations CSS

    • 2

      Créez des animations fluides avec la propriété CSS transform

    • 3

      Modifiez le point d’ancrage d’un élément grâce à transform-origin

    • 4

      Analysez la performance de vos animations avec Chrome DevTools

    • 5

      Animez les couleurs de manière performante avec opacity

    • Quiz : Réalisez des translations, des rotations et modifier l'opacité de vos animations

  • Partie 3

    Réalisez des animations dynamiques avec les @keyframes

    • 1

      Créez des animations plus complexes avec la règle CSS @keyframes

    • 2

      Utilisez les propriétés de l'animation CSS

    • 3

      Manipulez et réutilisez les animations CSS

    • 4

      Affinez vos animations CSS avec DevTools

    • 5

      Résumé du cours

    • Quiz : Réalisez des animations dynamiques

Réalisez des animations dynamiques

Testez vos connaissances !

Créez un compte gratuitement ou connectez-vous pour suivre ce cours et faire ce quiz.
Créer un compteSe connecter

Question 1

Question 2