Curso de Animaciones con CSS 🎨✨

Este repositorio contiene todo el material, código y apuntes del curso de Animaciones CSS. Aprende desde principios básicos hasta técnicas avanzadas de optimización creando un juego interactivo.

🔗 Ver curso en Platzi

Producto Final: AnimationLand 🐇🎮

¡Un divertido juego interactivo!
Un teléfono animado donde:

• Conejitos aparecen y desaparecen detrás de bloques de tierra
• Al hacer clic en los conejos sumas puntos
• Marcador dinámico en la parte superior
• Implementado 100% con CSS y HTML

---

Estructura del Repositorio 📂

/
├── 📁 clases/ # Código fuente de cada lección
├── 📁 notas/ # Apuntes detallados y resúmenes
└── 📁 producto-final/ # Proyecto final completo

---

Requisitos para el Curso 🚦

1. Conocimiento básico de HTML y CSS
2. Familiaridad con selectores CSS
3. Editor de código instalado (VS Code recomendado)

---

Plan de Estudios 📚

Fundamentos de Animación (1-4)

1. Principios de Animación CSS
   Keyframes y Animation en Acción
   🎮 AnimationLand game intro

2. Maquetación de Juegos con CSS
   Animaciones Interactivas

3. Capas y Z-Index
   Técnicas avanzadas de posicionamiento

4. Dibujo CSS: Conejitos Animados
   Estructura y estilización de personajes

Propiedades CSS Avanzadas (5-8)

5. Dominando Keyframes
   Configuración de propiedades básicas

6. Control de Animaciones
   Duración e iteración

7. Timing Functions
   Curvas de aceleración y delays

8. Dirección y Estado
   Fill-mode y control de reproducción

Optimización Profesional (9-11)

9. Renderizado Web
   Layout, Paint y Composite

10. Debugging con DevTools
    Perfilamiento de animaciones

11. CSS Triggers
    Técnicas de optimización avanzada

---

Cómo Ejecutar AnimationLand 🚀

# Clonar repositorio
git clone https://github.com/AnthoFu/bunny-animations.git

# Abrir proyecto final
cd Producto\ final/
abrir index.html # o usar live server```