Generador de animaciones CSS de pulso y latido
Crea animaciones CSS de latido, pulso u onda de brillo y copia el código
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta permite crear una animación CSS de pulso para botones, iconos o insignias sin escribir keyframes a mano. Elige entre tres estilos —latido, pulso estándar u onda de brillo— y ajusta la escala, la velocidad y la función de tiempo mientras ves una vista previa en directo, para luego copiar el CSS terminado con un clic. Todo el procesamiento ocurre en tu navegador, sin enviar datos a ningún servidor.
Cómo usar
- Elige un estilo: latido, pulso estándar u onda de brillo.
- Ajusta los deslizadores de escala y velocidad para definir la intensidad y rapidez de la animación.
- Selecciona una función de tiempo como ease, linear o cubic-bezier para afinar la sensación del movimiento.
- Revisa la vista previa y haz clic en 'Copiar CSS' para obtener el código @keyframes generado.
Preguntas frecuentes
- ¿Puedo pegar el CSS generado directamente en mi proyecto?
- Sí, copia el bloque @keyframes y la clase .pulsing-element, y aplica esa clase a cualquier elemento que quieras animar.
- ¿Por qué no puedo ajustar la escala en la onda de brillo?
- El estilo de onda de brillo se basa en un box-shadow que se expande en lugar de escalar el elemento, por lo que solo la velocidad y la función de tiempo son ajustables.
- ¿Cómo logra el estilo de latido esa sensación de doble pulso?
- Coloca distintos valores de escala en los puntos 0 %, 14 %, 28 %, 42 %, 70 % y 100 %, creando un latido pequeño y rápido seguido de otro más grande, como un corazón real.