Ferramentas para desenvolvedores
Gerador de Animações CSS
Gere regras CSS de fotogramas-chave e propriedades de animação com duração, temporização e direção personalizadas.
Executar ferramenta
Este gerador cria o código CSS completo para transições visuais com fotogramas-chave (keyframes), combinando a regra de animação com a declaração para o elemento pretendido. O modelo base aplica um efeito de entrada com deslocamento vertical, iniciando em 0% com opacidade nula e translação de 20 píxeis, e terminando em 100% com opacidade total e posição original. Cada parâmetro pode ser ajustado conforme as necessidades da interface: o identificador da animação, a duração em segundos, a função de temporização (easing), a direção do movimento e o modo de preenchimento (fill mode). Se omitir o identificador, o valor predefinido fadeIn é utilizado; se o campo estiver vazio, o sistema assume myAnimation. A duração recebe a unidade de tempo em segundos de forma automática. O bloco gerado fica pronto a copiar e colar na sua folha de estilos, assegurando uma integração rápida e consistente em páginas web modernas.
Instruções
- Introduza o nome pretendido para a animação ou mantenha o valor sugerido.
- Indique a duração da transição em segundos no campo numérico correspondente.
- Defina a função de temporização desejada, como ease, linear ou cubic-bezier.
- Especifique a direção do ciclo e o modo de preenchimento para controlar o estado final do elemento.
- Copie o bloco de código CSS gerado que surge na área de resultados para o seu ficheiro de estilos.
Exemplos
- Entrada com nome slideUp, duração de 0.8 segundos, temporização ease-out, direção normal e modo de preenchimento forwards para manter o elemento visível após a transição.
- Entrada com valores padrão para criar uma transição suave fadeIn de 1 segundo com temporização ease e comportamento de preenchimento none.
Perguntas frequentes
Que tipo de transição visual é gerada pelos fotogramas-chave?
O código gerado inclui uma transição que combina o aumento gradual de opacidade (de 0 a 1) com uma deslocação vertical de 20 píxeis até à posição original (0px).
O que acontece se deixar o nome da animação em branco?
Se o campo for submetido completamente vazio, o gerador atribui automaticamente o nome myAnimation à regra @keyframes e à classe correspondente.
Como é formatada a duração no código final?
O valor numérico inserido é acompanhado automaticamente pelo sufixo 's', representando o tempo total de execução em segundos.