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
La animación es lo que hace que los juegos y las webs se sientan vivos. Un botón que brilla al pasar el ratón, una moneda que gira, una pelota que rebota, un personaje que se desliza por la pantalla: todo eso es animación, y puedes construir cada pieza tú mismo.
En este tutorial tu avatar de Vibe Coding Academy te guía a través de código real para copiar y pegar. Empezarás con efectos de hover sencillos, subirás de nivel a animaciones en bucle con @keyframes y luego controlarás el movimiento fotograma a fotograma con JavaScript: el mismo truco que usan los juegos de verdad. Cada fragmento es tuyo para pegar, ejecutar y retocar.
Al final tendrás botones animados, una pelota que rebota, una moneda que gira y un sprite que puedes mover con las teclas de flecha, además de los prompts de IA para generar más cuando quieras.
What's Inside
4 hands-on chapters • about 1.5 hours of fun.
- 1Introducción: qué es realmente la animación + tu primer efecto de hover
- 2Hacer que las cosas se muevan: @keyframes, una pelota que rebota y una moneda que gira
- 3Efectos chulos y temporización: transform, easing y un pulso brillante
- 4Anima tu propio proyecto: un sprite de juego en JavaScript que puedes controlar
