Como usar: Gerador de Animação Hover CSS
- Escolha um preset de hover, como Crescer, Elevar, Inclinar ou Tremer.
- Troque a prévia entre botão, card, ícone e texto, e passe o mouse para testar.
- Ajuste duração, suavização e keyframes até ficar do jeito que você quer.
- Copie o CSS — ele também se aplica em
:focus-visiblepara quem usa o teclado.
Animação hover vs transição
Para uma mudança simples de A para B, uma transition basta e volta suavemente quando o ponteiro sai do elemento. Animações com keyframes em :hover brilham quando o efeito tem várias etapas (um quique, um tremor, uma oscilação) ou deve repetir enquanto o mouse estiver sobre o elemento. Este gerador cria os seletores :hover e :focus-visible, assim quem usa o teclado recebe o mesmo feedback, e mantém os efeitos sutis: algo em torno de 150 a 300 ms parece responsivo.
O que você pode criar
- Linha do tempo de keyframes — adicione quantos keyframes quiser, arraste-os para novas porcentagens e defina a suavização de cada um.
- Propriedades — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacity, blur, brilho (box-shadow), cor de fundo e border-radius. Valores ausentes são interpolados, então as transformações nunca dão saltos.
- Gatilhos — ao carregar, ao passar o mouse, ao clicar, ao entrar na tela ou uma animação dirigida pela rolagem, só com CSS.
- Escalonamento — anime uma lista item por item com uma única propriedade customizada CSS.
- Inspeção — pause, avance quadro a quadro, reduza para ¼ da velocidade e ative a pele de cebola para ver todos os keyframes de uma vez.
- Exportação — CSS em forma abreviada ou longhand, HTML, JavaScript, Tailwind v3 e v4, um mixin SCSS, um arquivo de demo independente ou um link de compartilhamento.
A forma abreviada de animation
| Parte | Exemplo | Significado |
|---|---|---|
| nome | fade-in-up | A regra @keyframes a ser executada |
| duração | 0.6s | Duração de um ciclo |
| função de temporização | cubic-bezier(.33,1,.68,1) | Curva de velocidade entre os keyframes |
| atraso | 0.2s | Espera antes de começar; valores negativos começam no meio da animação |
| número de iterações | infinite | Quantos ciclos executar |
| direção | alternate | Executa ao contrário a cada ciclo alternado |
| modo de preenchimento | both | Mantém o primeiro quadro antes e o último depois da execução |
Acessibilidade
Algumas pessoas ficam tontas ou com enjoo com movimento. Com Respeitar prefers-reduced-motion ativado, o CSS desliga a animação para visitantes que ativaram “reduzir movimento” no sistema operacional. Evite piscadas mais de três vezes por segundo e mantenha animações em loop sutis ou ofereça ao usuário uma forma de pausá-las.
Dicas de desempenho
Anime transform e opacity em vez de top, left, width ou margin, que forçam o recálculo de layout a cada quadro. Use will-change apenas em elementos que estão prestes a animar. Ajuste sua suavização com o gerador de cubic-bezier, adicione um spinner pelo gerador de loader CSS e combine animações com sombras ou gradientes.
Também pesquisado como: efeitos hover css, animação hover css, efeito hover botão, gerador hover css, efeito hover card, hover css.
Ferramentas que combinam com: Gerador de Animação Hover CSS
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
- Gerador de Glassmorphism — Monte um card de vidro fosco com sliders em tempo real e copie o CSS compatível com todos os navegadores — com o prefixo -webkit-backdrop-filter e um fallback para navegadores mais antigos.
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
Perguntas frequentes
O CSS gerado é gratuito para usar?
Posso editar uma animação que já tenho?
Como iniciar a animação quando o elemento entra na tela?
animation-timeline: view(), sem JavaScript, nos navegadores que suportam essa propriedade.Funciona com Tailwind CSS?
tailwind.config.js para a v3 e um bloco @theme para a v4, assim você pode usar a animação como uma classe animate-*.Quais propriedades são melhores para animações suaves?
transform e opacity rodam no compositor da GPU e continuam suaves até em celulares lentos. Blur, sombras, cores e border-radius custam mais, então use-os com moderação em elementos grandes.