Ferramentas gratuitas
Português
Gerar animações CSS
Gerar animações CSS — Digite dados e confira o formato ou conteúdo. Guia de entrada: Modo, Segundos. Sem cadastro.
Sem cadastro
Carregando ferramenta…
Como usar
- 1Guia de entrada: Modo, Segundos.
- 2Execute a ferramenta e confira o resultado.
- 3Copiar resultado / Salvar resultado.
Saiba mais
Confira primeiro o formato do exemplo. Guarde o original e verifique valores, espaços e quebras antes de usar o resultado.
Os anúncios podem processar dados de conexão. A personalização segue suas escolhas de privacidade. Privacidade (inglês)
Exemplo calculado de entrada e saída
Resultados do motor real com os valores abaixo, sem dados pessoais ou trabalhos salvos. Carregue o exemplo na ferramenta para conferir as mesmas entradas.
Entrada de exemplo
| Campo | Valor |
|---|---|
| Modo | Aparecer gradualmente |
| Segundos | 1 |
Resultado de exemplo
@keyframes example {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: example 1s ease both; }
@media (prefers-reduced-motion: reduce) {
.element { animation: none; }
}Condições de entrada
São limites reais de validação, sem garantir que todo valor aceito seja realista ou adequado ao seu caso.
- Modo: Opções disponíveis: Aparecer gradualmente / Aparecer deslizando / Girar