keyframes.md

Capítulo 1 – Keyframes

Lección 1 – ¿Qué son los Keyframes?

• Introducción a los Keyframes.
• Breve historia de las animaciones CSS.
• Conceptos fundamentales.
• Terminología básica.
• Primer ejemplo práctico.
• Errores comunes.
• Ejercicio práctico.

Lección 2 – Sintaxis de @keyframes

• Qué es la sintaxis y por qué es importante.
• Estructura básica de @keyframes.
• Uso de from y to.
• Uso de porcentajes (0%, 50%, 100%).
• Reglas para nombrar animaciones.
• Agrupación de porcentajes.
• Buenas prácticas.
• Errores comunes.
• Ejercicio práctico.

Lección 3 – Cómo funciona la línea de tiempo

• Qué es una timeline.
• Inicio y final de una animación.
• Distribución temporal.
• Estados intermedios.
• Interpolación.
• Cómo interpreta el navegador los cambios.
• Ejercicio práctico.

Lección 4 – Propiedades animables

• Qué significa que una propiedad sea animable.
• Propiedades recomendadas (opacity, transform, color).
• Propiedades problemáticas (width, height, top, left).
• Propiedades no animables.
• Rendimiento y optimización.
• Ejercicio práctico.

Lección 5 – Múltiples Keyframes

• Crear varios estados dentro de una animación.
• Uso de porcentajes intermedios.
• Rebotes y ondas.
• Efectos complejos.
• Casos reales.
• Ejercicio práctico.

Lección 6 – Animation Name

• Qué es animation-name.
• Relación entre animation-name y @keyframes.
• Convenciones de nombres.
• Errores comunes.
• Ejercicio práctico.

Lección 7 – Animation Duration

• Qué es la duración.
• Uso de segundos y milisegundos.
• Duraciones recomendadas.
• Experiencia de usuario y percepción.
• Ejercicio práctico.

Lección 8 – Animation Timing Function

• Qué es el easing.

• Tipos principales:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

• Curvas de aceleración.

• Casos de uso.

• Ejercicio práctico.

Lección 9 – Animation Delay

• Qué es un retraso.
• Delay positivo y negativo.
• Creación de secuencias.
• Ejercicio práctico.

Lección 10 – Animation Iteration Count

• Control de repeticiones.
• Número específico de ciclos.
• Animaciones infinitas.
• Cuándo utilizar cada opción.
• Errores comunes.
• Ejercicio práctico.

Lección 11 – Animation Direction

• Dirección normal.
• Reverse.
• Alternate.
• Alternate Reverse.
• Casos de uso.
• Ejercicio práctico.

Lección 12 – Animation Fill Mode

• None.
• Forwards.
• Backwards.
• Both.
• Casos reales.
• Ejercicio práctico.

Lección 13 – Animation Play State

• Running.
• Paused.
• Pausar animaciones con interacción.
• Hover animations.
• Controles interactivos.
• Ejercicio práctico.

Lección 14 – Shorthand Animation

• Sintaxis abreviada de animation.
• Orden recomendado.
• Lectura profesional del código.
• Ejercicio práctico.

Lección 15 – Proyecto Final de Keyframes

• Card animada.
• Loader animado.
• Botón interactivo.
• Entrada de elementos.
• Secuencia de animaciones.
• Optimización.
• Buenas prácticas.
• Desafío final.