Como gerar uma animação CSS com keyframes configuráveis

Prepare a animação antes de gerar o CSS

Este gerador cria texto CSS para uma animação de keyframes e inclui a declaração que aplica essa animação a um elemento. É uma forma prática de preparar um efeito de entrada baseado em opacidade e deslocação vertical, mantendo a configuração reunida num único resultado. Pode indicar o nome, a duração, a função de temporização, a direção e o modo de preenchimento. A estrutura visual produzida permanece definida por duas posições: uma no início e outra no fim. Isso permite concentrar a sua atenção nos valores de configuração sem confundir essas opções com novas etapas visuais. Antes de utilizar o texto, pense no nome que pretende reconhecer na folha de estilos e no comportamento temporal que deseja declarar. A duração é inserida com a unidade de segundos, enquanto as restantes opções descrevem a forma como a animação deve ser aplicada.

Preencha os campos e gere o texto

1. Abra o gerador e identifique os campos disponíveis para a animação. Introduza um nome, como slideIn, se quiser substituir o valor predefinido. Se deixar o nome vazio, será utilizado myAnimation, por isso confirme essa escolha quando o nome tiver importância para a organização do CSS. 2. Indique a duração apenas com o valor pretendido, por exemplo 1.5. O gerador acrescenta s na declaração, formando 1.5s; não repita essa unidade na entrada. 3. Selecione a função de temporização, a direção e o modo de preenchimento adequados ao uso previsto. Quando esses campos são omitidos, os valores utilizados são ease, normal e none, respetivamente. 4. Execute a geração e leia o texto apresentado. Confirme que existe uma regra de keyframes e uma declaração de animação para um elemento. 5. Compare o nome da regra com o nome usado na declaração. Depois, reveja a duração e as três opções de comportamento para garantir que o resultado corresponde ao que pretendia configurar.

Interprete a estrutura que recebeu

Um resultado bem-sucedido apresenta texto CSS com uma animação de keyframes e uma declaração de animação associada a um elemento. Nos keyframes, a posição de 0% define opacidade 0 e deslocação vertical de 20px. Na posição de 100%, a opacidade passa a 1 e a deslocação vertical passa a 0. A leitura conjunta destes valores descreve um aparecimento acompanhado por um movimento vertical ascendente. O nome, a duração, a função de temporização, a direção e o modo de preenchimento alteram a configuração declarada, mas não criam posições intermédias. Se vir fadeIn, 1s, ease, normal e none, esses valores correspondem às predefinições aplicadas quando os respetivos campos não foram fornecidos. Para reconhecer uma configuração personalizada, compare cada valor do resultado com a entrada feita. Se a animação precisar de outras propriedades ou de etapas adicionais, o texto gerado terá de ser editado para esse objetivo.

Exemplo prático

Uma página precisa de aplicar uma animação de entrada chamada slideIn durante 1,5 segundos.

Introduza slideIn no nome e 1.5 na duração, mantenha ease, normal e none, e execute a geração para consultar o texto CSS.

O resultado contém uma regra de keyframes com opacidade 0 e deslocação de 20px em 0%, opacidade 1 e deslocação de 0 em 100%, além de uma declaração com slideIn 1.5s ease normal none.

Limitações

• Os campos disponíveis não definem outras propriedades CSS nem acrescentam etapas intermédias às duas posições visuais produzidas.

Erros comuns

• Se o nome personalizado não aparecer, verifique se o campo foi deixado vazio; nesse caso, procure myAnimation tanto nos keyframes como na declaração, ou introduza o nome pretendido e gere o texto novamente.

Perguntas frequentes

Que unidade aparece na duração?

A duração recebe a unidade s na declaração. Assim, se introduzir 1.5, deverá procurar 1.5s no texto CSS apresentado.

O que acontece se eu deixar o nome vazio?

Se o campo ficar vazio, o nome utilizado será myAnimation. Para usar outra identificação, introduza-a antes de gerar o texto.

Quais são os valores predefinidos?

Quando um campo não é fornecido, o gerador utiliza fadeIn para o nome, 1 para a duração, ease para a temporização, normal para a direção e none para o modo de preenchimento.