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.
What You'll Learn
Description
Animation ist das, was Spiele und Websites lebendig wirken lässt. Ein Button, der beim Hover leuchtet, eine Münze, die sich dreht, ein Ball, der hüpft, eine Figur, die über den Bildschirm gleitet — all das ist Animation, und jedes Stück davon kannst du selbst bauen.
In diesem Tutorial führt dich dein Avatar der Vibe Coding Academy durch echten Code zum Kopieren und Einfügen. Du startest mit einfachen Hover-Effekten, steigst zu Schleifen-Animationen mit @keyframes auf und steuerst dann die Bewegung Bild für Bild mit JavaScript — derselbe Trick, den echte Spiele nutzen. Jedes Snippet gehört dir zum Einfügen, Ausführen und Verändern.
Am Ende hast du animierte Buttons, einen hüpfenden Ball, eine sich drehende Münze und ein Sprite, das du mit den Pfeiltasten bewegen kannst — plus die KI-Prompts, um jederzeit mehr zu erzeugen.
What's Inside
4 hands-on chapters • about 1.5 hours of fun.
- 1Einführung — was Animation wirklich ist + dein erster Hover-Effekt
- 2Dinge in Bewegung bringen — @keyframes, ein hüpfender Ball und eine drehende Münze
- 3Coole Effekte & Timing — transform, Easing und ein leuchtendes Pulsieren
- 4Dein eigenes Projekt animieren — ein JavaScript-Spiel-Sprite, das du steuerst
