CSS Transition Generator
Configure CSS transitions with hover preview.
Transicao 1
Passe o cursor
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}Sobre esta ferramenta
O Gerador de Transicoes CSS permite configurar a propriedade abreviada transition definindo a propriedade alvo, duracao, funcao de tempo e atraso. A previa interativa mostra o comportamento antes de copiar o codigo.
As transicoes CSS criam mudancas de estado suaves entre dois valores CSS, acionadas por pseudo-classes como :hover, :focus ou mudancas de classe via JavaScript.
Como usar
- Selecione a propriedade CSS a transicionar (ou use all).
- Defina a duracao — quanto tempo leva a transicao (ex: 0.3s).
- Escolha uma funcao de tempo para controlar a curva de aceleracao.
- Opcionalmente adicione um atraso antes do inicio da transicao.
- Passe o cursor sobre a caixa de previa para ver o efeito ao vivo, depois copie o CSS.
Casos de uso
Desenvolvedores usam transicoes para efeitos hover em botoes, escalonamento de cards e mudancas de cor em links de navegacao. Designers de formularios as usam para estilos de foco de entrada.
Perguntas frequentes
- Qual e a diferenca entre transition e animation? — Transicoes reagem a uma mudanca de estado (como hover); animacoes executam automaticamente ou em loop usando keyframes.
- Posso transicionar multiplas propriedades? — Sim. Clique em Adicionar transicao para adicionar multiplas regras de propriedade separadas por virgulas.
- Quais propriedades podem ser transicionadas? — A maioria das propriedades com valores numericos: opacity, color, transform, dimensoes, etc. Propriedades como display nao podem ser transicionadas.