Gerador de animação CSS
Ajuste as predefinições de movimento ou os keyframes e reproduza a animação para verificá-la. Obtenha o CSS para usar em uma página web e um exemplo de uso em HTML.
O que você pode fazer
Ajustar o movimento a partir de um preset
Escolha entre 12 tipos, incluindo entradas, saídas e rotação. Altere a duração e a repetição conforme o seu uso.
Editar também os estados intermediários
Especifique movimento, rotação, escala e opacidade para cada keyframe e confira o movimento gerado.
Obter CSS e HTML
Copie ou salve o CSS da animação e um exemplo de uso em HTML com a mesma classe.
Como usar
Escolher um preset
Escolha o movimento desejado e defina a duração de 1 reprodução. Selecionar um preset diferente também substitui quaisquer configurações que você tenha ajustado.
Ajustar somente as partes necessárias
Abra os detalhes de reprodução ou os keyframes para alterar o movimento intermediário, a direção, a repetição e outras configurações.
Gerar e reproduzir
Confira com “Gerar CSS e prévia”. Se alterar alguma configuração, gere novamente.
Obter CSS e HTML
Aplique o CSS e adicione a classe toollet-motion a um elemento HTML. Use o exemplo de uso em HTML junto com o CSS.
Útil quando
Criar uma animação de entrada
Use um preset de fade-in ou de entrada vinda de baixo para ajustar o movimento e a velocidade de entrada.
Movimento ao interagir com um botão
Altere a condição de início para hover ou foco do teclado para criar um movimento que responde à interação.
Entender keyframes e condições de reprodução
Estados intermediários e duração
O % de um keyframe é a posição dele dentro de 1 reprodução. Para uma animação de 1 segundo, 50% fica em 0,5 segundo. O easing determina como os valores mudam entre os keyframes.
Movimento, rotação e aparência
Posição horizontal/vertical é a quantidade de movimento em relação à posição original. Uma escala de 1 é o tamanho original; uma opacidade de 0 é transparente e 1 é opaco.
Atraso, repetição e direção
O atraso é adicionado apenas uma vez, antes do início da reprodução. Para reprodução finita, o tempo total é atraso + duração de 1 reprodução × contagem de repetições. O modo alternado troca entre as direções para frente e para trás.
Estados antes e depois da reprodução
Escolha qual estado aparece durante o atraso e após o fim da reprodução. As configurações de reverso e alternado mudam quais posições de keyframe são usadas no início e no fim da reprodução.
Configurações de redução de movimento
O CSS gerado é compatível com a configuração de redução de movimento do seu dispositivo. Ele interrompe a animação e usa o estado final determinado pela direção e pela contagem de repetições configuradas. Para reprodução infinita, usa o ponto final da primeira reprodução.
Perguntas frequentes
Posso reproduzir apenas uma vez?
Desative “Continuar repetindo” e defina a contagem de repetições como 1. Os presets padrão começam com 1 reprodução, enquanto rotação e flutuação começam com a repetição contínua ativada.
A qual elemento devo aplicar o CSS?
Adicione a classe toollet-motion a um elemento HTML e use-a com o CSS gerado. O exemplo de uso em HTML é um fragmento de elemento button, não uma página web completa e independente.
Quantos keyframes posso criar?
Você pode ter de 2 a 8 keyframes, incluindo o início em 0% e o fim em 100%. Adicionar um keyframe o coloca no ponto médio do intervalo mais amplo. O início e o fim não podem ser excluídos, e apenas suas posições em % são fixas.
A prévia desapareceu depois que mudei uma configuração.
Os resultados são limpos quando as configurações mudam, para que você não use sem querer o movimento ou o código de configurações anteriores. Gere novamente para conferir as configurações atuais.
Por que a prévia não está se movendo?
O movimento para quando a redução de movimento está ativada no seu dispositivo. Para configurações de hover e foco, verifique também as condições de início. A prévia é pausada quando você muda para outra aba.
Posso usar várias animações na mesma página?
Os nomes de classe e de keyframe gerados são compartilhados. Para usar animações separadas, altere ambos os nomes de cada animação e reflita essas alterações no HTML correspondente.
Entrada e resultados
- Configurações
- 12 presets, de 2 a 8 keyframes e duração de 0,2 a 60 segundos.
- Reprodução
- Um atraso de 0 a 60 segundos, de 1 a 100 repetições ou repetição infinita, easing, direção, estados antes e depois da reprodução e condições de início.
- Saída
- CSS e um exemplo de uso em HTML. Apenas o movimento é definido; uma página web completa ou um arquivo de vídeo não é criado.