Visualizador de funções de aceleração

Clique em qualquer cartão para copiar o valor CSS cubic-bezier() ou o código TypeScript para a área de transferência. Passe o mouse para visualizar a animação.

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

Sobre & FAQ

Sobre: Visualize e compare 30 funções de aceleração — curvas interativas, animação ao passar o mouse, copie CSS cubic-bezier() ou código TypeScript com um clique. Todo o processamento ocorre localmente no seu navegador com JavaScript nativo — nenhum dado é enviado a qualquer servidor. Funciona totalmente offline como PWA.

Perguntas frequentes

Quais funções de aceleração estão incluídas?

Esta ferramenta visualiza 30 funções de aceleração padrão em 10 categorias: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic e Bounce. Cada categoria tem três variantes: easeIn (início lento), easeOut (final lento) e easeInOut (início e final lentos).

Posso copiar o valor CSS cubic-bezier()?

Sim. Clique em qualquer cartão para copiar o valor CSS cubic-bezier() para a área de transferência. Para funções Elastic e Bounce — que não podem ser representadas como cubic-bezier — o código TypeScript é copiado em vez disso.

Esta ferramenta funciona offline?

2Kit é uma PWA. Após a sua primeira visita, funciona completamente offline.

Algum dado é enviado a um servidor?

Não. Toda a renderização de curvas e animações é executada inteiramente no seu navegador usando a API HTML Canvas. Nada é enviado ou transmitido.

Implementação técnica

Todo o processamento é executado inteiramente no seu navegador — nenhum dado é enviado a qualquer servidor. Esta ferramenta funciona completamente offline como um Aplicativo Web Progressivo (PWA): após a primeira visita, todas as páginas e recursos são armazenados em cache pelo Service Worker e permanecem disponíveis sem conexão à internet. Os seus dados de entrada nunca saem do seu dispositivo, tornando-o seguro para conteúdo sensível como chaves de API, senhas, configurações privadas e documentos confidenciais.

▸ Índice do site

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