EspañolGerador de animação de entrada CSS
Escolha o efeito, a duração e a curva e veja na prévia. Ative o modo ao rolar para os elementos aparecerem conforme a pessoa desce a página.
Animações de entrada para o site
Disponível em: 
Gerador de animação de entrada CSS: para que serve
Escolha o efeito, a duração, a curva (com a ease-out forte recomendada), a distância e o atraso em cascata entre os itens. A prévia mostra seis blocos entrando e pode ser repetida.
O código usa transições de opacity e transform, um IntersectionObserver para animar quando o elemento aparece na tela e uma versão sem deslocamento para quem prefere menos movimento. Sem JavaScript, o conteúdo aparece normalmente.
Como usar
- Escolha o efeito, a duração e a curva.
- Ajuste a distância e a cascata e veja a prévia.
- Copie o CSS e o script e use a classe anima.
Quando usar
- Seções de landing pages que aparecem ao rolar.
- Cartões de serviços e produtos em cascata.
- Dar acabamento a sites institucionais.
Perguntas frequentes
Qual duração usar?
Para elementos de interface, de 150 a 300 milissegundos. Em seções de páginas de apresentação, até uns 600 ms ainda parece natural. Animações longas demais fazem o site parecer lento.
Qual curva escolher?
Para coisas que entram na tela, use uma curva que desacelera no fim (ease-out forte, como cubic-bezier(0.23, 1, 0.32, 1)): o movimento começa rápido e assenta suave. Evite ease-in em entradas, porque atrasa justamente o começo.
E quem não gosta de movimento?
O código respeita a configuração de reduzir movimento do sistema (prefers-reduced-motion): os elementos só aparecem com um fade curto, sem deslocamento.
Como funciona o modo ao rolar?
Um IntersectionObserver adiciona a classe visivel quando o elemento entra na tela. Sem JavaScript, os elementos aparecem normalmente, sem animação.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.