Gerador de Animação CSS de Sprite Sheet

Transforme um sprite sheet em uma animação CSS com steps() pronta para copiar e colar, com uma prévia ao vivo, direto no seu navegador.

Seu sprite sheet é lido localmente no seu navegador para construir a prévia e gerar o CSS; a imagem nunca é enviada e permanece no seu dispositivo.

Arrumando a saída? Experimente o Formatador de CSS.

Sobre Animação CSS de Sprite Sheet

Este gerador de animação CSS de sprite sheet transforma uma tira ou grade de quadros em uma animação CSS pronta para colar, construída sobre @keyframes e a função de timing steps(). Solte uma imagem de sprite sheet para uma prévia ao vivo, ou apenas digite a largura, a altura e a contagem dos quadros e deixe a ferramenta fazer as contas de background-position para você. Ela lida tanto com uma única linha horizontal quanto com uma grade completa, percorrendo os quadros no sentido das linhas, coluna a coluna e depois linha a linha, e combina os keyframes com background-size para que cada célula fique exatamente no lugar. Defina a velocidade por FPS ou duração total, nomeie a animação, escolha infinita ou uma contagem fixa de iterações e escolha uma direção. Você recebe o CSS completo — dimensionamento do elemento, o bloco @keyframes e o atalho de animation — que pode copiar ou baixar como um arquivo .css. Tudo roda no seu dispositivo, então um sheet enviado é lido localmente e nunca sai do seu navegador.

Recursos

Como usar Animação CSS de Sprite Sheet

  1. Envie um sprite sheet, ou pule o envio e apenas informe as dimensões dos seus quadros.
  2. Escolha linha única ou grade, e defina largura, altura e contagem dos quadros (além de colunas e linhas para uma grade).
  3. Defina a velocidade com FPS ou uma duração total, então nomeie a animação e escolha a iteração e a direção.
  4. Veja o elemento animar na prévia ao vivo para confirmar que o enquadramento está certo.
  5. Copie o CSS gerado ou baixe-o como um arquivo .css e coloque-o no seu projeto.

Exemplo

Entrada

8 frames, 64×64 each, single row, 12 fps, infinite

Saída

.sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  animation: sprite 0.667s steps(8) infinite normal;
}

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

Um sheet de linha única precisa apenas de steps(8) e um keyframe de duas paradas para reproduzir todos os quadros.

Erros comuns e solução de problemas

Perguntas frequentes

Como steps() anima um sprite sheet?
steps(n) divide a animação em n partes iguais e salta entre elas em vez de interpolar, então o background-position pula de um quadro para o próximo. Usar steps() igual à sua contagem de quadros faz cada quadro ser exibido por um passo, sem posições intermediárias borradas.
Preciso enviar minha imagem?
Não. Enviar um sprite sheet dá uma prévia ao vivo, mas você pode gerar um CSS correto apenas com a largura, a altura e a contagem dos quadros. Sem uma imagem, a prévia mostra uma grade de espaço reservado enquanto as contas e a saída permanecem precisas.
Qual é a diferença entre o modo de linha única e o de grade?
O modo de linha única assume que todos os quadros ficam em uma tira horizontal e emite um keyframe compacto de from/to. O modo de grade lida com sheets de várias linhas emitindo uma parada de background-position por quadro, movendo-se coluna a coluna e depois linha a linha, e adiciona background-size para que o sheet inteiro escale corretamente.
Devo definir FPS ou uma duração total?
Use FPS quando souber quantos quadros devem ser reproduzidos por segundo; a ferramenta o converte em uma duração dividindo a contagem de quadros pelo FPS. Use a duração total quando quiser que o loop inteiro leve um número específico de milissegundos, independentemente da contagem de quadros.
Como faço o loop da animação para sempre ou só algumas vezes?
Escolha Infinita para um loop sem parar, que mapeia para animation-iteration-count: infinite. Escolha Contagem e informe um número para reproduzir a sequência um número fixo de vezes, e use a opção de direção para reprodução reverse ou alternate.
Meu sprite sheet é enviado para algum lugar?
Não. A imagem é lida localmente com o FileReader do seu navegador para construir a prévia e nunca sai do seu dispositivo; o CSS gerado é computado inteiramente na sua máquina.

Ferramentas relacionadas

Todas as ferramentas de ArrayKit