Editor de keyframes CSS
Crie quadros-chave de transformação e opacidade, com reprodução controlada, e exporte o CSS.
- Funciona no navegador
- Sem upload
- Confira antes de baixar
Os dados de entrada ficam nesta aba, sem envio nem salvamento automático. As contagens agregadas de uso e os diagnósticos gerais de processamento são opcionais e só são enviados com o seu consentimento, sem conteúdo nem nomes de arquivos. Limpar ou fechar apaga os dados; salve antes os resultados de que precisar.
Limites de recursos
De 2 a 32 quadros-chave com porcentagens distintas, incluindo 0 e 100. Translação de ±500 px, rotação de ±1080 graus, escala de 0 a 5, opacidade de 0 a 1, duração de 0,1 a 60 s e de 1 a 20 repetições. A reprodução respeita a preferência por movimento reduzido. A prévia é local e limitada, sem garantia de funcionar igual em todos os navegadores e layouts. Suas entradas nunca são executadas. Baixe o HTML e o CSS juntos. Limite de tempo: 8 segundos.
Como usar
- Configure o exemplo
Edite porcentagem, translação, rotação, escala e opacidade de cada estado. Defina a duração, o ritmo e as repetições. Gere, reproduza ou pause quando quiser e exporte a mesma sequência.
- Verifique antes de usar
Os dados de entrada ficam nesta aba, sem envio nem salvamento automático. As contagens agregadas de uso e os diagnósticos gerais de processamento são opcionais e só são enviados com o seu consentimento, sem conteúdo nem nomes de arquivos. Limpar ou fechar apaga os dados; salve antes os resultados de que precisar. De 2 a 32 quadros-chave com porcentagens distintas, incluindo 0 e 100. Translação de ±500 px, rotação de ±1080 graus, escala de 0 a 5, opacidade de 0 a 1, duração de 0,1 a 60 s e de 1 a 20 repetições. A reprodução respeita a preferência por movimento reduzido. A prévia é local e limitada, sem garantia de funcionar igual em todos os navegadores e layouts. Suas entradas nunca são executadas. Baixe o HTML e o CSS juntos. Limite de tempo: 8 segundos.
- Exporte o resultado verificado
Baixar resultado; Baixar original
Perguntas e limites
Limites de recursos
De 2 a 32 quadros-chave com porcentagens distintas, incluindo 0 e 100. Translação de ±500 px, rotação de ±1080 graus, escala de 0 a 5, opacidade de 0 a 1, duração de 0,1 a 60 s e de 1 a 20 repetições. A reprodução respeita a preferência por movimento reduzido. A prévia é local e limitada, sem garantia de funcionar igual em todos os navegadores e layouts. Suas entradas nunca são executadas. Baixe o HTML e o CSS juntos. Limite de tempo: 8 segundos.
Design offline
Os dados de entrada ficam nesta aba, sem envio nem salvamento automático. As contagens agregadas de uso e os diagnósticos gerais de processamento são opcionais e só são enviados com o seu consentimento, sem conteúdo nem nomes de arquivos. Limpar ou fechar apaga os dados; salve antes os resultados de que precisar.
Verifique antes de usar
Edite porcentagem, translação, rotação, escala e opacidade de cada estado. Defina a duração, o ritmo e as repetições. Gere, reproduza ou pause quando quiser e exporte a mesma sequência.