Les animations CSS : notions de base pour débuter
ERROR
00:00
00:00

TUTO Les animations CSS : notions de base pour débuter

Sébastien Imbert
16,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Leçon 2
La propriété transform
Leçon 3
Les transitions
Leçon 4
Les keyframes
Leçon 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
Leçon 7
On anime une scène Mario Kart avec les keyframes 3/5

Plan détaillé du cours

Leçon 1Introduction
03m47s
Leçon 2La propriété transform
11m29s
Leçon 3Les transitions
07m49s
Leçon 4Les keyframes
05m09s
Leçon 5On anime une scène Mario Kart avec les keyframes 1/5
06m08s
Leçon 6On anime une scène Mario Kart avec les keyframes 2/5
10m08s
Leçon 7On anime une scène Mario Kart avec les keyframes 3/5
06m51s
Leçon 8On anime une scène Mario Kart avec les keyframes 4/5
04m43s
Leçon 9On anime une scène Mario Kart avec les keyframes 5/5
05m30s
Leçon 10Animation d'un personnage avec steps()
09m48s
Leçon 11Construction de l'animation de la pop-up 1/2
12m54s
Leçon 12Construction de l'animation de la pop-up 2/2
14m09s
Leçon 13Pour aller plus loin
03m

Aperçus

Avis des apprenants

Détail des avis
138
Apprenants
15
Commentaires
5/5
Note moyenne
5/5
15
4/5
0
3/5
0
2/5
0
1/5
0
Maxime Gicquel
Maxime Gicquel
Publié le 27/05/2023
Très clair ! Très instructif ! Approches avec beaucoup de pédagogie.
Jean Villemont
Jean Villemont
Publié le 20/03/2023
plutôt simple mais très efficace. je valide!
Nicolas Cherfils
Nicolas Cherfils
Publié le 28/11/2021
Tutoriel très bien expliqué en pas à pas ! Je recommande.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données