Editor de keyframes CSS

Crie keyframes de transformação e opacidade com reprodução controlada e CSS.

  • Funciona no navegador
  • Sem envio
  • Verifique antes de transferir

Os dados de entrada ficam neste separador, sem envio ou gravação automática. As contagens agregadas de utilização e os diagnósticos gerais de processamento são opcionais e enviados apenas com consentimento, sem conteúdo nem nomes de ficheiros. Limpar ou fechar elimina os dados; guarde primeiro os resultados necessários.

Limites de recursos

De 2 a 32 fotogramas-chave com percentagens 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, repetições de 1 a 20. A reprodução respeita a preferência por movimento reduzido. A pré-visualização local é limitada e não garante o mesmo resultado em todos os navegadores e disposições. As entradas não são executadas. Transfira o HTML e o CSS em conjunto. Limite: 8 segundos.

Fotogramas-chave 1
Fotogramas-chave 2
Fotogramas-chave 3

Como utilizar

  1. Configurar o exemplo

    Edite a percentagem, a translação, a rotação, a escala e a opacidade de cada estado. Defina a duração, o ritmo e as repetições. Clique em Gerar, reproduza ou pause quando quiser e exporte a mesma sequência.

  2. Verificar antes de utilizar

    Os dados de entrada ficam neste separador, sem envio ou gravação automática. As contagens agregadas de utilização e os diagnósticos gerais de processamento são opcionais e enviados apenas com consentimento, sem conteúdo nem nomes de ficheiros. Limpar ou fechar elimina os dados; guarde primeiro os resultados necessários. De 2 a 32 fotogramas-chave com percentagens 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, repetições de 1 a 20. A reprodução respeita a preferência por movimento reduzido. A pré-visualização local é limitada e não garante o mesmo resultado em todos os navegadores e disposições. As entradas não são executadas. Transfira o HTML e o CSS em conjunto. Limite: 8 segundos.

  3. Exportar o resultado verificado

    Transferir resultado; Transferir original

Perguntas e limites

Limites de recursos

De 2 a 32 fotogramas-chave com percentagens 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, repetições de 1 a 20. A reprodução respeita a preferência por movimento reduzido. A pré-visualização local é limitada e não garante o mesmo resultado em todos os navegadores e disposições. As entradas não são executadas. Transfira o HTML e o CSS em conjunto. Limite: 8 segundos.

Design offline

Os dados de entrada ficam neste separador, sem envio ou gravação automática. As contagens agregadas de utilização e os diagnósticos gerais de processamento são opcionais e enviados apenas com consentimento, sem conteúdo nem nomes de ficheiros. Limpar ou fechar elimina os dados; guarde primeiro os resultados necessários.

Verificar antes de utilizar

Edite a percentagem, a translação, a rotação, a escala e a opacidade de cada estado. Defina a duração, o ritmo e as repetições. Clique em Gerar, reproduza ou pause quando quiser e exporte a mesma sequência.