# Visualizador de Easing e Animação CSS Visualiza uma curva de easing cubic-bezier do CSS, pré-visualiza em posição/opacidade/escala, escolhe predefinições e exporta CSS > Página canônica: https://elysiatools.com/pt/tools/css-easing-visualizer - **Categoria:** Design - **Palavras-chave:** easing, cubic-bezier, animação, css, curva ## Visão geral 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. ## Entradas - **Entrada de easing** (text): cubic-bezier(0.34, 1.56, 0.64, 1) · ease-out · linear - **Predefinição** (select) - **Duração (ms)** (number) - **Atraso (ms)** (number) ## 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. ## 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. ## Ferramentas relacionadas - [Conversor de espacos de cor](https://elysiatools.com/pt/tools/color-space-converter): Converte uma cor entre HEX, RGB, HSL, CIELAB e Display-P3 com saida CSS e verificacao de gamut. - [Conversor de cores CMYK](https://elysiatools.com/pt/tools/cmyk-converter): Converte cores entre HEX, RGB, HSL e CMYK. - [Conversor de Cores OKLCH](https://elysiatools.com/pt/tools/oklch-color-converter): 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 - [Gerador de Animação CSS](https://elysiatools.com/pt/tools/animation-generator): Gera quadros-chave e propriedades de animação CSS - [Extrator de paleta por URL da imagem](https://elysiatools.com/pt/tools/color-palette-extractor-from-image-url): Busca uma URL de imagem remota, extrai cores dominantes, exporta arquivos de paleta prontos para codigo e mostra os contrastes - [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão. - [Gerador de snippets CSS glassmorphism / neumorfismo](https://elysiatools.com/pt/tools/glassmorphism-css-snippet-builder): Gera de ponta a ponta o snippet CSS completo de glassmorphism ou neumorfismo: ajuste desfoque, saturação, opacidade da tonalidade, raio, borda, sombra externa e brilho superior; opcionalmente sobreposição de grão SVG feTurbulence e fallback @supports; inclui automaticamente o prefixo -webkit-backdrop-filter (obrigatório antes do Safari 18) e o mapeamento para classes Tailwind (com a nota v3/v4), com pré-visualização ao vivo sobre fundo em gradiente. - [Extrator de paleta de cores da imagem](https://elysiatools.com/pt/tools/image-color-palette-extractor): Envia uma imagem, extrai cores dominantes e exporta tokens prontos para codigo com checagem de contraste ## Exemplos - [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/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 - [Exemplos do Framework CSS Milligram](https://elysiatools.com/pt/samples/milligram): Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes - [Exemplos Tailwind CSS](https://elysiatools.com/pt/samples/tailwind-css): Exemplos Tailwind CSS - Framework CSS utility-first com design responsivo, componentes e configurações personalizadas - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato ## Conteúdo relacionado - [Criação de CSS, layout e cascata](https://elysiatools.com/pt/hubs/css-authoring-layout-and-cascade-workflows): Crie e revise CSS com formatação, diagnóstico de seletores, trechos responsivos, efeitos visuais e verificações renderizadas.