Módulo 02: Movimiento Avanzado

Paso 2: Keyframes y Líneas de Tiempo

Los keyframes definen los estados inicial, final e intermedios de una animación. En lugar de una simple transición entre dos estados, `@keyframes` te permite orquestar secuencias complejas con precisión, cambiando múltiples propiedades a lo largo de una duración establecida.

code styles.css

@keyframes move-and-shape {
  0% {
    transform: translateX(0);
    background: #3525cd;
  }
  50% {
    transform: translateX(200px) rotate(180deg);
    background: #006e4b;
    border-radius: 50%;
  }
  100% {
    transform: translateX(0);
    background: #3525cd;
  }
}

visibility Vista Previa

deployed_code

02:00 / 04:00

Pensando en Secuencias

Dominar los keyframes requiere pasar del diseño estático a la narración cronológica.

linear_scale

Mapeo de Porcentajes

Mapea los estados de tu animación a porcentajes (0% a 100%) para mantener un tiempo fluido a través de diferentes duraciones.

auto_graph

Funciones de Tiempo

Combina keyframes con cubic-bezier para crear aceleraciones y desaceleraciones realistas.

layers

Apilamiento de Estados

Transforma múltiples propiedades como escala, opacidad y color simultáneamente para una retroalimentación de alto impacto.

"El movimiento es la puntuación del diseño de interfaz."

Aprende a guiar la atención del usuario sin distracciones.