Tous les cours

Développement

Créez des animations CSS modernes

Vous souhaitez animer votre site web avec des animations CSS ? Ce cours est fait pour vous ! Vous y découvrez notamment les keyframes et les transitions pour créer des sites dynamiques et modernes.
DifficultéMoyenne15 heures
Ce cours en libre accès vous intéresse ?

Mais, que fait ce graphique bleu et vert ? Il bouge ? Pourtant, il a été codé en CSS, n'est-ce pas ? Regardons cela de plus près... Vous voulez voir le code ?

Des barres verticales qui grossissent et qui se réduisent en miroir

Vous avez travaillé dur pour acquérir des compétences en CSS. Il est maintenant temps de vous amuser. Vous allez plonger dans le monde des animations CSS pour donner vie à vos pages web !

Pour cela, nous allons découvrir comment faire des animations de qualité grâce aux 12 principes de l'animation, et étendre vos connaissances avec :

  • la fonction  transform

  • les pseudoéléments ;

  • les @keyframes ;

  • l'opacité, et les itérations.

Vous allez même découvrir comment ajouter de l'interactivité pour les utilisateurs de votre page :

Un carré qui pivote au clic de la souris

Mais attention, n'allez pas  croire que les animations servent juste de décoration. Cela permet véritablement d'améliorer l'expérience utilisateur de vos sites !

Un champ email qui devient rouge et qui tremble lorsque l'email n'est pas correct

Prêt à donner vie à vos pages web ? Alors, c'est parti !

Objectifs pédagogiques

  • Réaliser ses premières animations CSS
  • Maîtriser les translations, les rotations et l’opacité
  • Réaliser des animations dynamiques

Prérequis

Prérequis

Outils nécessaires :

  • un éditeur de code 

  • Chrome (pour Chrome Dev Tools)

Contributeurs

Professeurs

Pat Gerke

Developer, animator, designer, and globetrotter

Alexia Toulmet

Développeuse frontend passionnée par l'enseignement 👩‍💻

Créé par

OpenClassrooms

Mis à jour le 23/01/2025

Licence

Développement

Créez des animations CSS modernes

DifficultéMoyenne15 heures
Cours en libre accès