SKIP TO CONTENT
BEGINNER
1.5 hours4 chapters

Animation Basics

Make things move! Learn to build bouncing balls, spinning coins, glowing buttons, and game sprites you can drop straight into your own games and websites.

Vibe Coding Academy Avatar
Progress: 0%In progress

What You'll Learn

Faire briller et grandir des boutons avec les transitions CSS
Créer des animations en boucle avec @keyframes
Déplacer, faire pivoter et redimensionner avec transform
Animer un sprite de jeu avec JavaScript

Description

L'animation, c'est ce qui rend les jeux et les sites vivants. Un bouton qui brille au survol, une pièce qui tourne, une balle qui rebondit, un personnage qui glisse sur l'écran : tout ça, c'est de l'animation, et tu peux en construire chaque morceau toi-même.

Dans ce tutoriel, ton avatar de Vibe Coding Academy te guide à travers du vrai code à copier-coller. Tu commenceras par de simples effets au survol, tu passeras au niveau supérieur avec des animations en boucle @keyframes, puis tu contrôleras le mouvement image par image avec JavaScript — la même astuce qu'utilisent les vrais jeux. Chaque extrait est à toi pour le coller, l'exécuter et le bidouiller.

À la fin, tu auras des boutons animés, une balle qui rebondit, une pièce qui tourne et un sprite que tu peux déplacer avec les touches fléchées — sans oublier les prompts d'IA pour en générer d'autres quand tu veux.

What's Inside

4 hands-on chapters • about 1.5 hours of fun.

  • 1
    Introduction — ce qu'est vraiment l'animation + ton premier effet au survol
  • 2
    Faire bouger les choses — @keyframes, une balle qui rebondit et une pièce qui tourne
  • 3
    Effets cool et timing — transform, easing et une pulsation lumineuse
  • 4
    Anime ton propre projet — un sprite de jeu en JavaScript que tu contrôles
Vibe Coding Academy Avatar
"Ready to make pixels dance? Hit Start Learning and let's bring your ideas to life!"