Les infos clés
En résumé
Vous souhaitez animer votre sites web avec de belles 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.
Les prérequis
Bases en CSS. Si vous ne les maîtrisez pas, suivez ce cours : Apprenez à créer votre site web avec HTML5 et CSS3
Le programme
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 : Avez-vous compris les bases pour réaliser 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 : Avez-vous compris comment faire 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
Certificat de réussite
Les intervenants
Alexia Toulmet
Développeuse Fullstack React/Node freelance passionnée par le frontend
Pat Gerke
Developer, animator, designer, and globetrotter
Le concepteur
OpenClassrooms (anciennement le Site du Zéro ou SdZ), est un site web qui propose des cours autour de l'informatique, des sciences et de l'entrepreneuriat.
Les cours en ligne peuvent être réalisés aussi bien par l'équipe du site, des professeurs d'universités ou de grandes écoles partenaires que par ses membres.
Aujourd'hui, les cours sont disponibles dans plusieurs format : MOOC (Massive Open Online Course), texte web, e-book, livre et en vidéo. L'entreprise délivre des certifications pour certains cours, dont une reconnue par l'état, en partenariat avec IESA multimédia.
Le cours est très complet, le code des animations est expliqué étape par étape. Dommage qu’ils n’ont pas intégrés d’exercices à faire directement dans le cours, comme pour d’autres cours sur la plateforme et aussi , le seul aspect un peu gênant dans le début du cours : c’est les pages avec plein d’animations qui tournent sans cesse, ce qui m’a forcé à tenir la main à chaque fois devant pour lire le texte ! !
Le cours devrait plutôt s'appeler "Comment créer des animations avec SASS" Le pire dans tout ça, aucune explication, et mise en place des fichiers SASS, on nous balance ça comme si c'était du css, alors que c'est très différent, même gratuit j'en veux pas.
Le cours est très complet, le code des animations est expliqué étape par étape. Dommage qu’ils n’ont pas intégrés d’exercices à faire directement dans le cours, comme pour d’autres cours sur la plateforme et aussi , le seul aspect un peu gênant dans le début du cours : c’est les pages avec plein d’animations qui tournent sans cesse, ce qui m’a forcé à tenir la main à chaque fois devant pour lire le texte ! !
