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

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 !