¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de animación de clave CSS

ColorDesarrollador

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

Preset de animación

Programar

Configuración de Animación

Nombre

Duración (s)

Aceleración

cubic-bezier()

Iteraciones

Infinite

Dirección

Modo de relleno

Cuadros clave

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Generador de animaciones de cuadros clave de CSS

Generador de animación de clave CSS

Crea animaciones @keyframes de CSS visualmente con una vista en tiempo real. Elige entre 10 presets populares como bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash y wobble — o crea tu propia animación de cuadros clave desde cero. Ajusta la duración, la aceleración, el número de iteraciones, la dirección y el modo de relleno, luego copia el código CSS generado.

Cómo Usar

Elige un preset de animación o comienza con una animación personalizada. Configura las opciones de animación: nombre, duración, función de aceleración, número de iteraciones, dirección y modo de relleno. Edita los puntos clave de animación estableciendo el porcentaje, el valor de transformación y la opacidad para cada punto. Añade o elimina puntos clave según sea necesario. Observa actualizaciones en tiempo real en la vista en vivo, luego copia el código CSS generado.

Características

10 Presets de animación – Bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash y wobble listos para usar
Editor de cuadros clave personalizado – Añade, elimina y edita puntos clave de animación con controles de porcentaje, transformación y opacidad
Vista en vivo de animación – Ve cómo se reproduce tu animación en un elemento de demostración en tiempo real mientras realizas cambios
Control completo de animación – Configura la duración, la aceleración (incluyendo cubica-bezier personalizada), el número de iteraciones, la dirección y el modo de relleno
Salida CSS Limpia – Genera tanto la regla @keyframes como la propiedad de animación abreviada, lista para pegar en tu hoja de estilo

ANUNCIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Qué son los @keyframes de CSS?

Los @keyframes de CSS definen las etapas de una secuencia de animación. Cada cuadro clave especifica estilos en un punto particular del timeline de la animación, expresado como un porcentaje desde 0% (inicio) hasta 100% (fin). El navegador interpola los valores de propiedades entre cuadros clave para crear transiciones suaves.
¿Cuál es la diferencia entre transiciones CSS y animaciones CSS?

Las transiciones CSS animan un cambio de propiedad entre dos estados (por ejemplo, al pasar el ratón), provocado por un cambio de estado. Las animaciones CSS usando @keyframes pueden ejecutarse automáticamente, repetirse, tener múltiples etapas intermedias y ofrecer más control con propiedades como animation-direction, iteration-count y fill-mode.
¿Qué hace la propiedad fill-mode de animación?

La propiedad fill-mode de animación controla cómo se aplican los estilos antes y después de que se reproduce la animación. 'forwards' mantiene los estilos del último cuadro clave después de que termina la animación. 'backwards' aplica los estilos del primer cuadro clave durante el periodo de retraso. 'both' aplica ambos comportamientos. 'none' vuelve a los estilos originales del elemento.
¿Qué es una función de aceleración cubic-bezier?

Una función de aceleración cubic-bezier define una curva de velocidad personalizada para una animación usando cuatro puntos de control (x1, y1, x2, y2). Determina cuán rápido o lento avanza la animación en diferentes momentos del tiempo. Los presets comunes como ease, ease-in y ease-out son atajos nombrados para valores específicos de cubic-bezier.