4.8/5 Trustpilot (1400 avis)
Animations CSS - Le guide par la pratique
Animations CSS - Le guide par la pratique
Savoir faire des animations simples et efficaces en CSS est une compétence aujourd'hui indispensable en intégration Web. En plus d'apporter du dynamisme à une page Web, les animations renforcent l'expérience utilisateur.
Dans ce tutoriel vidéo, je vous propose d'aborder toutes les notions de base qu'il y a connaître pour que vous puissiez animer n'importe quel éléments d'une page Web ! De l'animation du changement de couleur de fond d'un bouton à l'animation de l’apparition d'une pop-up.
Au programme de ce tuto animation CSS
Pour bien comprendre comment créer des animations en CSS, il est important de bien comprendre les propriétés utilisées pour faire ces animations, nous verrons donc au cours de ce tutoriel :
- les transformations de base qu'il est possible d'appliquer à un élément avec la propriété transform
- les propriétés de transitions
- les keyframes
- les propriétés d'animations
- comment créer une scène animée Mario Kart en utilisant les keyframes pour construire les différentes animations
- l'animation d'un personnage qui cours à l'aide d'une série de sprites
- l'animation d'une pop-up au clic d'un bouton
Ce tutoriel est accessible aux personnes ayant des bases en HTML et CSS.
Je reste disponible dans la section entraide pour répondre à vos questions.
Les fichiers utilisés dans le tuto sont fournis avec le fichier source. Un QCM est également disponible en fin de cours !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Introduction
Introduction
Leçon 2
La propriété transform
La propriété transform
Leçon 3
Les transitions
Les transitions
Leçon 4
Les keyframes
Les keyframes
Leçon 5
On anime une scène Mario Kart avec les keyframes 1/5
On anime une scène Mario Kart avec les keyframes 1/5
Leçon 6
On anime une scène Mario Kart avec les keyframes 2/5
On anime une scène Mario Kart avec les keyframes 2/5
Leçon 7
On anime une scène Mario Kart avec les keyframes 3/5
On anime une scène Mario Kart avec les keyframes 3/5
Table des matières
Leçon 1
Introduction
03m47
Leçon 2
La propriété transform
11m29
Leçon 3
Les transitions
07m49
Leçon 4
Les keyframes
05m09
Leçon 5
On anime une scène Mario Kart avec les keyframes 1/5
06m08
Leçon 6
On anime une scène Mario Kart avec les keyframes 2/5
10m08
Leçon 7
On anime une scène Mario Kart avec les keyframes 3/5
06m51
Leçon 8
On anime une scène Mario Kart avec les keyframes 4/5
04m43
Leçon 9
On anime une scène Mario Kart avec les keyframes 5/5
05m30
Leçon 10
Animation d'un personnage avec steps()
09m48
Leçon 11
Construction de l'animation de la pop-up 1/2
12m54
Leçon 12
Construction de l'animation de la pop-up 2/2
14m09
Leçon 13
Pour aller plus loin
03m
Aperçus
Avis des apprenants