Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Transição CSS

API reference

Gere uma transição CSS — propriedade, duração, atraso e função de temporização — com uma prévia ao vivo que responde ao hover e copie o atalho, a regra completa de hover e o HTML. Inclui um bloco prefers-reduced-motion.

Entrada

A prévia aplica uma mudança de hover correspondente à propriedade que você escolher.

Saída

Sua prévia de transição aparecerá aqui.

declaração transition
CSS
HTML
Isso foi útil?

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/css-transition-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "property": "background-color",
    "duration": "300",
    "delay": "0",
    "timing": "ease",
    "baseColor": "#3b82f6",
    "hoverColor": "#8b5cf6",
    "reducedMotion": "true"
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `css-transition-generator` tool (CSS Transition Generator) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/css-transition-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Transição CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

Uma transition em CSS faz uma mudança de propriedade acontecer gradualmente, em vez de ocorrer de forma instantânea. Este gerador permite escolher o que será animado, quanto tempo levará, quando começará e como vai acelerar, e então mostra o resultado em uma caixa sobre a qual você pode passar o mouse, para ajustar pelo efeito visual antes de copiar o CSS.

Como usar

  1. Escolha a propriedade a ser transicionada. all anima toda propriedade que mudar; indicar uma específica (como transform ou background-color) é mais rápido e mais previsível.
  2. Defina a duração e o atraso em milissegundos. De 150 a 300 ms parece responsivo para efeitos de hover; valores maiores combinam com movimentos amplos.
  3. Escolha a função de temporização. ease-out combina com elementos que entram, ease-in com elementos que saem, e linear com transições de cor e progresso. Escolha cubic-bezier() personalizada para definir os quatro pontos de controle, ou steps() para um efeito em etapas.
  4. Ajuste o estado de hover (cores e, para transform, a intensidade de escala, deslocamento ou rotação) e passe o mouse sobre a prévia.
  5. Copie a declaração transition em uma linha, a regra CSS completa ou o HTML.

Bom saber

  • A transição é escrita no estado de repouso, então ela acontece tanto quando o ponteiro entra quanto quando sai. Coloque um transition diferente em :hover se quiser temporizações assimétricas.
  • Apenas propriedades com um ponto intermediário calculável são animadas: cores, comprimentos, opacidade, transformações, sombras e filtros. display e height: auto não são.
  • Prefira transform e opacity: os navegadores conseguem animá-las na GPU sem recalcular o layout da página.
  • O CSS gerado inclui, por padrão, um bloco prefers-reduced-motion, para que quem pede menos movimento não receba nenhum. Desmarque a opção se você tratar isso em outro lugar.
  • Para um editor visual de curvas, experimente o Gerador CSS Cubic Bezier.
css transitionhover effecteasingcubic-bezieranimationdurationdelaytransition-timing-functionfrontend

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios