Cómo usar esta herramienta para desarrolladores
- Escribe un fotograma por línea con el formato porcentaje | declaraciones.
- Define nombre, duración, timing y repeticiones.
- Genera la animación.
- Revisa los pasos ordenados en la salida.
CSS Animation Keyframe Builder
Crea una regla @keyframes y la declaración animation a partir de fotogramas escritos como porcentaje y bloque de propiedades. Valida porcentajes, ordena los pasos y evita duplicados antes de producir CSS listo para copiar.
Datos de entrada
Parámetros y código fuenteEspacio publicitario
Qué hace esta herramienta para desarrolladores
Analiza cada línea, valida porcentajes entre 0 y 100 y construye @keyframes junto con una clase de ejemplo.
Formato de entrada: 0 | opacity:0; transform:translateY(10px);. Cada porcentaje debe ser único.
La herramienta no valida toda la gramática de las declaraciones CSS internas; conserva ese fragmento después de validar la estructura de pasos.
Ejemplo
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
Casos de uso
- Microinteracciones.
- Entradas y salidas de componentes.
- Estados de carga.
- Prototipos de motion CSS.
Consejos para obtener resultados fiables
- Incluye 0% y 100% cuando necesites estados inicial y final explícitos.
- Anima transform y opacity cuando sea posible.
- Evita nombres de keyframes genéricos en proyectos grandes.
- Respeta prefers-reduced-motion en producción.
Detalles del procesamiento
Los pasos se ordenan numéricamente aunque se introduzcan en otro orden.
No comprueba si una propiedad concreta es animable ni calcula interpolaciones intermedias.
Preguntas frecuentes
¿Qué formato usa el constructor de @keyframes?
Cada línea debe contener porcentaje, una barra vertical y declaraciones CSS, por ejemplo 50 | opacity: .5;.
¿Puedo introducir los porcentajes desordenados?
Sí. La herramienta los ordena antes de generar @keyframes.
¿Qué ocurre si repito un porcentaje?
Se muestra un error para evitar dos bloques ambiguos con el mismo selector de keyframe.
¿Cómo hago que la animación se repita indefinidamente?
Escribe infinite en el campo de iteraciones.
¿El constructor añade prefers-reduced-motion?
No automáticamente; conviene envolver o anular animaciones en tu hoja de estilos según la política de accesibilidad del proyecto.
Herramientas relacionadas para desarrolladores
Resumen del resultado
| Módulo | Función |
|---|---|
| Entrada | Parámetros configurables |
| Salida | Código listo para copiar |
| Validación | Comprobaciones locales en el navegador |