a11y.skipToMainContent
1

CSS Keyframes Animation Generator

Escoge una animación preestablecida, sintoniza el tiempo, mira cómo funciona en directo y copia tanto el bloque @keyframes como el shorthand de animación.

Animation

s
s

Preview

PLAY

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Keyframes Animation Generator

  1. Haga clic en una animación preestablecida como fade-in, bounce o spin.
  2. Establece duración, función de tiempo, retraso, cuenta de iteración, dirección y movimiento de llenado.
  3. Vea la carrera de vista previa y presione Replay para re-trigger it.
  4. Haga clic en Copiar CSS para agarrar el bloque @keyframes y el cortocircuito de animación.

¿Cómo se llama?

El Generador de Animación de Keyframes crea las animaciones CSS listas para usar. Elija un preset — fade-in, slide-in, bounce, pulso, sacudido, spin, flip o zoom-in — y cada uno envía su propio bloque de claves.Seguido/p =p =p]Tune la duración, el tiempo-función (incluyendo algunos presets cúbicos para overshoot), retraso, cuenta de iteración, dirección y movimiento de llenado. El elemento de vista previa ejecuta su animación inmediatamente y auto-replays en cada cambio; un botón Replay lo re-triggers on demand using a forced reflow. La herramienta se ejecuta enteramente en su navegador y produce tanto el código completo "Normas" / clave especificación de títulos y el emparejamiento "Nota de contacto" seleccionado / código de acceso directo, para que pueda pegar una animación completa y de trabajo directamente en su hoja de estilo
Advertisement

FAQ

¿Cuál es la diferencia entre @keyframes y la propiedad de la animación?
@keyframes define los cambios durante la animación (los pasos de/a o porcentaje), mientras que el cortocircuito de animación cuenta un elemento que claves para usar más su duración, aliviar, retrasar, contar y dirección. Necesitas una animación de trabajo.
¿Cómo hago que la animación juegue sólo una vez o bucle para siempre?
Establecer la iteración contar a un número como 1 para una sola carrera, o marcar 'infinito' para bucle para siempre. Estos mapas al valor de cuenta de animación en el shorthand generado.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Keyframes Animation Generator on Wikipedia·Developer Tools on Wikipedia·Keyframes Animation Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement