Développement
Créez des animations CSS modernes
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
-
Bases en CSS. Si vous ne les maîtrisez pas, suivez ce cours : Apprenez à créer votre site web avec HTML5 et CSS3
- Simplifiez-vous le CSS avec Sass
Outils nécessaires :
-
un éditeur de code
-
Chrome (pour Chrome Dev Tools)
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
1/5
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