Les animations CSS : notions de base pour débuter
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

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

Sébastien Imbert
15,99€
Acheter maintenant, payer plus tard. En savoir plus

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
03m47
Leçon 2La propriété transform
11m29
Leçon 3Les transitions
07m49
Leçon 4Les keyframes
05m09
Leçon 5On anime une scène Mario Kart avec les keyframes 1/5
06m08
Leçon 6On anime une scène Mario Kart avec les keyframes 2/5
10m08
Leçon 7On anime une scène Mario Kart avec les keyframes 3/5
06m51
Leçon 8On anime une scène Mario Kart avec les keyframes 4/5
04m43
Leçon 9On anime une scène Mario Kart avec les keyframes 5/5
05m30
Leçon 10Animation d'un personnage avec steps()
09m48
Leçon 11Construction de l'animation de la pop-up 1/2
12m54
Leçon 12Construction de l'animation de la pop-up 2/2
14m09
Leçon 13Pour aller plus loin
03m

Aperçus

Avis des apprenants

Détail des avis
343
Apprenants
17
Commentaires
5/5
Note moyenne
5/5
16
4/5
1
3/5
0
2/5
0
1/5
0
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 16/08/2024
Super intéressant et passionant, on peut vraiment faire des choses simples et sympathiques. Sur le dernier exercice de la Newsletter, il est dommage de ne pas avoir les fichiers avec la base d'où commence le tuto. Merci
Valérie Arno
Valérie Arno
Publié le 03/07/2024
Je n'ai jamais su faire des petites animations comme ce qu'on vient de faire et je trouve ça sympa. Je ne connaissais que la transition pour adoucir le mouvement. Pas très compliqué quand on a bien retenu les propriétés et la technique. J'ai pris pas mal de notes en commentaires dans le CSS, ça devrait m'aider quand j'y reviendrai. Je ne ferai pas dans le compliqué mais pour animer un peu nos sites web, ça fait moins plat. Merci pour toutes vos explications. Toujours dans le calme et dans un rythme tranquille.
Valérie Caruana
Valérie Caruana
Publié le 24/06/2024
Très intéressant, mais quel dommage de travailler sur le css déjà écrit, on ne peut pas s'approprier la progression et pour ma part, je n'ai pu qu'assister passivement à la création de l'animation. dommage car les thématiques sont top.

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

Payer plus tard

Prix d'achat : 15,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1400 tutos gratuits

Notre politique de protection des données