@keyframes cssap-anim {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
.preview {
animation: cssap-anim 800ms cubic-bezier(0.42,0,0.58,1) 0ms infinite;
}Qué hace
El Probador de animaciones CSS te deja diseñar y previsualizar animaciones CSS en vivo en tu navegador. Elige una propiedad animable (mover, escalar, desvanecer, girar), ajusta una duración y un retardo, escoge una curva de easing integrada - o esculpe tu propia cubic-bezier arrastrando los tiradores de los puntos de control - y después copia el CSS exacto de @keyframes y animation para pegarlo directamente en tu proyecto. Todo se ejecuta en el cliente, así que nada de lo que ajustes sale de tu máquina.
Cómo usarlo
- Usa el control segmentado Property para elegir qué se anima: Move (
translateX), Scale, Fade (opacity) o Spin (rotate). - Fija Duration (ms) y Delay (ms) con los selectores numéricos.
- Elige un preajuste de Easing (Linear, Ease, In, Out, In-out), o selecciona Custom para abrir el editor de curvas.
- En el editor de curvas, arrastra los dos tiradores de acento para dar forma a la cubic-bezier. La trayectoria azul y la vista previa se actualizan al instante mientras arrastras.
- Alterna Iterations entre Once y Loop.
- Pulsa Play para reproducir la vista previa desde el principio en cualquier momento, o Reset para restaurar los valores por omisión.
- Copia el CSS generado desde el panel de salida.
Ejemplos
Un desvanecimiento ágil (ease-out, 250ms, una vez)
@keyframes cssap-anim {
from { opacity: 1; }
to { opacity: 0.15; }
}
.preview {
animation: cssap-anim 250ms cubic-bezier(0,0,0.58,1) 0ms 1;
}Un easing personalizado
Pon Easing en Custom, después arrastra el primer tirador hacia la esquina inferior izquierda y el segundo hacia la superior derecha para lograr una sensación de arranque rápido y asentamiento suave. El cubic-bezier(...) generado se actualiza para coincidir - cópialo en tu propia regla transition o animation.
Buen saber
- Easing personalizado: arrastra los dos tiradores de acento dentro del cuadro unitario para dar forma a la curva; la trayectoria en vivo y la vista previa siguen tus ediciones en tiempo real.
- Listo para copiar y pegar: renombra los keyframes
cssap-animy el selector.previewpara que coincidan con tu propio marcado - el resto del CSS está listo para producción. - Privado: la herramienta entera se ejecuta en tu navegador - ningún parámetro de animación se envía jamás a un servidor.
- Herramientas relacionadas:
Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.
, JSON Formatter y el resto del conjunto CSS & Layout.