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.
Moyenne
15 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 ?

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 :

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 !

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

Mis à jour le 23/01/2025
Licence

Développement

Créez des animations CSS modernes

Moyenne
15 heures
Cours en libre accès