Fatos principais
- Categoria
- Design e cor
- Tipos de entrada
- text, select, number
- Tipo de saída
- html
- Cobertura de amostras
- 4
- API disponível
- Yes
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
- •Insira uma curva cubic-bezier personalizada ou selecione uma das predefinições disponíveis, como ease-out-expo ou snappy.
- •Defina a duração e o atraso da animação em milissegundos para simular o tempo exato de execução.
- •Visualize o gráfico SVG da curva com seus pontos de controle e observe as pré-visualizações interativas de translação, opacidade e escala.
- •Copie 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.
- Configuração de exemplo
-
{"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
- 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.
- Configuração de exemplo
-
{"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.
Testar com amostras
designExemplos 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
title token css
Exemplos do Framework CSS Milligram
Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes
title token css
Tailwind CSS Samples
Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
title token css
Exemplos de Seletores CSS
Coleção de exemplos de seletores CSS para testes de extração e análise
title token css
Hubs relacionados
Ferramentas de conversao de espacos de cor para web e impressao
Ferramentas reunidas para conversao de espacos de cor entre web e impressao em um unico hub.
Geradores de efeitos CSS, paletas e tokens de design
Ferramentas reunidas para efeitos visuais em CSS, construcao de paletas e geracao de tokens de design em um unico hub.
Ferramentas de auditoria de acessibilidade web e cores acessiveis
Revise problemas WCAG, ordem de leitor de tela, falhas de contraste, risco para deficiencia de visao de cores e escolhas de cor acessivel em um unico hub para fluxos de acessibilidade web.
Ferramentas de Design de Cor e Conversão de Espaços de Cor
Comparar conversores de cor, geradores de paletas, ferramentas de harmonia, verificadores de acessibilidade e utilitários de ajuste de cor em um só lugar para designers e desenvolvedores.
FAQ
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.