Elysia Tools

Explore ferramentas, exemplos, explicações visuais e guias temáticos em um espaço claro.

Categorias populares

Temas

Idioma
ZHESPTRUFRDEEN

Elysia Tools

Navegação

Design

Visualizador de Easing e Animação CSS

· Última atualização：2026-06-21

Visualiza uma curva de easing cubic-bezier do CSS, pré-visualiza em posição/opacidade/escala, escolhe predefinições e exporta CSS

Detalhes

O que esta ferramenta ajuda você a fazer

Ajuste o tempo de animação CSS vendo a curva de easing e uma pré-visualização ao vivo simultaneamente.

Entradas:

  • Insira um cubic-bezier(x1, y1, x2, y2) personalizado, escolha uma predefinição nomeada (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…) ou uma palavra-chave.
  • Ajuste duração (ms) e atraso (ms).

O relatório mostra:

  • A curva de easing (progresso vs tempo) como SVG, com os dois pontos de controle Bézier, contra uma referência linear tracejada. Curvas com ultrapassagem (y<0 ou y>1, como ease-out-back) são sinalizadas pois produzem ricocheteio mas podem causar saltos de layout.
  • Três pré-visualizações ao vivo — translateX, opacity e scale — animadas com o easing CSS real, com botão de repetição.
  • CSS pronto para copiar nos formatos transition e @keyframes.

O solver Bézier usa Newton-Raphson com recuo de bissecção para mapear tempo → progresso como os navegadores.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Continue com ferramentas e temas relacionados

Escrito pela equipe Elysia Tools
HTML/CSS86
CSS48
Animação32
Scale20

Guia de uso da ferramenta

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Categoria
Design
Tipos de entrada
text, select, number
Tipo de saída
html
Cobertura de exemplos
4
API pronta
Sim

Visão geral

O Visualizador de Easing e Animação CSS permite ajustar e testar o tempo de transições web em tempo real. Insira curvas cubic-bezier personalizadas ou selecione predefinições populares para visualizar o gráfico de progresso, testar animações de translação, opacidade e escala, e copiar o código CSS pronto para uso em seus projetos.

Quando usar

  • Ao projetar transições de interface personalizadas que exigem curvas de aceleração e desaceleração específicas além das opções padrão do navegador.
  • Para testar o comportamento de efeitos de ricochete (overshoot) usando curvas como ease-out-back sem precisar recarregar o código no navegador.
  • Quando precisar gerar rapidamente código CSS de transição ou regras @keyframes com tempos e atrasos precisos.

Como funciona

  1. 1Insira uma curva cubic-bezier personalizada ou selecione uma das predefinições disponíveis, como ease-out-expo ou snappy.
  2. 2Defina a duração e o atraso da animação em milissegundos para simular o tempo exato de execução.
  3. 3Visualize o gráfico SVG da curva com seus pontos de controle e observe as pré-visualizações interativas de translação, opacidade e escala.
  4. 4Copie o código CSS gerado nos formatos de transição ou keyframes diretamente para a sua folha de estilo.

Casos de uso

  • Criação de efeitos de rebote suaves para botões e modais interativos usando curvas com ultrapassagem.
  • Ajuste fino de animações de carregamento (spinners) e transições de opacidade para melhorar a percepção de velocidade da interface.
  • Geração rápida de trechos de código CSS para sincronizar múltiplos elementos com o mesmo comportamento de aceleração.

Exemplos

1. Animação de Entrada Suave para Modal

Designer de Interface

Contexto

Um designer de interface precisa criar uma transição de entrada para uma janela modal que pareça rápida no início e desacelere suavemente no final.

Problema

Encontrar os valores exatos de cubic-bezier para uma desaceleração dramática sem parecer artificial.

Como usar

Selecione a predefinição 'ease-out-expo' ou insira 'cubic-bezier(0.16, 1, 0.3, 1)', ajuste a duração para 600ms e clique em reproduzir para testar a escala e opacidade.

{"easing": "cubic-bezier(0.16, 1, 0.3, 1)", "preset": "ease-out-expo", "duration": 600, "delay": 0}

Resultado

Uma curva de desaceleração acentuada é gerada, permitindo copiar o CSS de transição ideal para a entrada do modal.

2. Efeito de Rebote em Botão de Ação

Desenvolvedor Front-end

Contexto

Um desenvolvedor quer adicionar um efeito de micro-interação elástica quando o usuário passa o mouse sobre um botão principal.

Problema

Visualizar o comportamento de ultrapassagem (overshoot) para garantir que o botão não ultrapasse os limites do layout de forma exagerada.

Como usar

Perguntas frequentes

Como funciona o cálculo da curva Bézier nesta ferramenta?

A ferramenta utiliza o método Newton-Raphson com recuo de bissecção para mapear a relação entre tempo e progresso, simulando exatamente o comportamento dos navegadores modernos.

O que significa o aviso de ultrapassagem (overshoot) na curva?

Significa que a curva possui valores de y menores que 0 ou maiores que 1 (como ease-out-back), criando um efeito de rebote que pode causar saltos visuais indesejados no layout.

Posso testar a animação em diferentes propriedades visuais?

Sim, a ferramenta exibe três pré-visualizações simultâneas em tempo real: translação horizontal (translateX), opacidade (opacity) e escala (scale).

Quais formatos de exportação de código CSS são fornecidos?

A ferramenta gera o código CSS pronto para copiar tanto no formato de propriedade transition quanto em blocos de regras @keyframes.

Posso ajustar o atraso da animação?

Sim, você pode configurar o atraso (delay) e a duração (duration) em milissegundos diretamente nos campos de configuração.

Tema

Criação de CSS, layout e cascata

Crie e revise CSS com formatação, diagnóstico de seletores, trechos responsivos, efeitos visuais e verificações renderizadas.

Início
Ferramentas3197
Exemplos593
Visualizações461
Visualizadores de arquivos103
Temas229
Etiquetas333
Imagens, áudio e vídeo655

Ferramentas de processamento, conversão e otimização de imagens, áudio e vídeo

Matemática, datas e finanças644

Calculadoras, ferramentas numéricas, lógica de datas, estatística e finanças

Design e cor296

Ferramentas de cor, layout, gráficos, estilo visual e apoio ao design

Texto e escrita209

Ferramentas de escrita, limpeza, formatação, extração e análise de texto

Desenvolvimento e Web193

Utilitários para desenvolvedores, rede, depuração web e automação

Conversão e codificação175

Ferramentas de conversão de formatos, arquivos, unidades, arquivos compactados e codificação

Estruturar uma captura de interface, revisar e entregar ao desenvolvimento
Esboço de piano, revisão MIDI e entrega de uma demonstração de áudio
Revisão de texturas retrô e entrega de recursos
Revisão e entrega de guias de procedimento com capturas
Revisão visual de alterações responsivas e entrega de evidências

© 2026 Elysia Tools. Todos os direitos reservados.

DocumentaçãoPreçosSobreTermos de serviçoPolítica de privacidadeCookiesContato
Frameworks CSS

Exemplos do Framework CSS Bulma

Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS

Frameworks CSS

Exemplos do Framework CSS Milligram

Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes

Desenvolvimento Web

Exemplos Tailwind CSS

Exemplos Tailwind CSS - Framework CSS utility-first com design responsivo, componentes e configurações personalizadas

Python

Exemplos de Processamento de Imagem Web Python

Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato

Design

Conversor de espacos de cor

Converte uma cor entre HEX, RGB, HSL, CIELAB e Display-P3 com saida CSS e verificacao de gamut.

Design

Conversor de cores CMYK

Converte cores entre HEX, RGB, HSL e CMYK.

Design

Conversor de Cores OKLCH

Converte entre HEX, RGB, HSL, OKLCH e Display-P3 com a matemática do CSS Color 4, com leitura de luminosidade/croma/matiz, verificação de gamut sRGB e Display-P3, e sugestão de recorte fora do gamut

Design

Gerador de Animação CSS

Gera quadros-chave e propriedades de animação CSS

Selecione a predefinição 'ease-out-back', defina a duração para 500ms e observe a pré-visualização de escala para validar o efeito de ricochete.

{"easing": "cubic-bezier(0.34, 1.56, 0.64, 1)", "preset": "ease-out-back", "duration": 500, "delay": 0}

Resultado

O gráfico exibe a curva ultrapassando o limite superior (y > 1) e gera o código CSS com a transição elástica perfeita.