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
Animação é o que faz jogos e sites parecerem vivos. Um botão que brilha ao passar o mouse, uma moeda que gira, uma bola que quica, um personagem que desliza pela tela — tudo isso é animação, e você pode construir cada pedaço por conta própria.
Neste tutorial, seu avatar da Vibe Coding Academy te guia por código real para copiar e colar. Você começa com efeitos de hover simples, sobe de nível para animações em loop com @keyframes e depois controla o movimento quadro a quadro com JavaScript — o mesmo truque que os jogos de verdade usam. Cada trecho é seu para colar, executar e ajustar.
No final você terá botões animados, uma bola que quica, uma moeda que gira e um sprite que dá para mover com as teclas de seta — além dos prompts de IA para gerar mais quando quiser.
What's Inside
4 hands-on chapters • about 1.5 hours of fun.
- 1Introdução — o que é animação de verdade + seu primeiro efeito de hover
- 2Fazendo as coisas se moverem — @keyframes, uma bola que quica e uma moeda que gira
- 3Efeitos legais e tempo — transform, easing e uma pulsação brilhante
- 4Anime seu próprio projeto — um sprite de jogo em JavaScript que você controla
