Visualizador de funciones de aceleración

Haz clic en cualquier tarjeta para copiar el valor CSS cubic-bezier() o el código TypeScript. Pasa el ratón para previsualizar la animación.

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

Acerca & FAQ

Acerca: Visualiza y compara 30 funciones de aceleración — curvas interactivas, animación al pasar el ratón, copia con un clic de CSS cubic-bezier() o código TypeScript. Todo el procesamiento ocurre localmente en su navegador con JavaScript nativo — no se envían datos a ningún servidor. Funciona completamente sin conexión como PWA.

Preguntas frecuentes

¿Qué funciones de aceleración se incluyen?

Esta herramienta visualiza 30 funciones de aceleración estándar en 10 categorías: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic y Bounce. Cada categoría tiene tres variantes: easeIn (inicio lento), easeOut (final lento) y easeInOut (inicio y final lentos).

¿Puedo copiar el valor CSS cubic-bezier()?

Sí. Haz clic en cualquier tarjeta para copiar el valor CSS cubic-bezier() al portapapeles. Para las funciones Elastic y Bounce — que no pueden representarse como cubic-bezier — se copia el código TypeScript en su lugar.

¿Funciona esta herramienta sin conexión?

2Kit es una PWA. Tras tu primera visita, funciona completamente sin conexión.

¿Se envían datos a algún servidor?

No. Todo el renderizado de curvas y las animaciones se ejecutan completamente en tu navegador usando la API HTML Canvas. Nada se sube ni se transmite.

Implementación técnica

Todo el procesamiento se ejecuta íntegramente en su navegador — nunca se envían datos a ningún servidor. Esta herramienta funciona completamente sin conexión como Aplicación Web Progresiva (PWA): tras la primera visita, todas las páginas y recursos son almacenados en caché por el Service Worker y permanecen disponibles sin conexión a internet. Sus datos de entrada nunca abandonan su dispositivo, lo que lo hace seguro para contenido sensible como claves API, contraseñas, configuraciones privadas y documentos confidenciales.

▸ Índice del sitio

English json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Deutsch json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Español json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Français json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Indonesia json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Italiano json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

日本語 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

한국어 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Nederlands json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Polski json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Português json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Русский json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Türkçe json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Tiếng Việt json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

中文 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions