Gerador de Animação Sprite CSS
Gere automaticamente código de animação CSS
a partir de várias imagens ou uma planilha de sprites
📏 Configurações de grade
⚙️ Configurações de animação
🎞️ Ordem dos Quadros
Arraste para reordenarVocê também pode gostar
Sobre o Gerador de Animações Sprite
O Gerador de Animações Sprite CSS é uma ferramenta online gratuita que gera automaticamente código CSS para animações usando a propriedade animation e a função steps(), a partir de várias imagens ou uma planilha existente.
Ao contrário das animações GIF, os sprites CSS oferecem alta qualidade de imagem sem degradação. Eles permitem que você controle de forma flexível a velocidade, direção e iteração diretamente no CSS. Além disso, eles preservam áreas semitransparentes (canal alfa).
Tudo, desde o carregamento até a geração de código CSS, é processado inteiramente no seu navegador. Suas imagens nunca são enviadas a um servidor, garantindo velocidade e segurança.
Como criar animações sprite CSS
Carregar Imagens
Selecione uma planilha de sprites combinada ou carregue várias imagens para combiná-las.
Ajustar Animação
Verifique a pré-visualização, defina colunas e linhas, velocidade de reprodução e direção.
Obter Código
Baixe a imagem gerada e copie o código CSS/HTML automático para o seu projeto.
Propriedades CSS Explicadas
Como o CSS animation + steps() funciona
A função steps() é usada na propriedade animation-timing-function. Enquanto animações normais (como ease) interpolam valores suavemente, o steps() altera o valor em incrementos discretos.
Na animação de sprites, esta propriedade é usada para mudar a background-position pela largura de um quadro instantaneamente.
| Propriedade | Descrição | Função em Sprites |
|---|---|---|
| animation-timing-function | A curva de ritmo da animação | Configurar steps(N) evita transições suaves. |
| background-position | A posição inicial de uma imagem de fundo | Modificado dentro do @keyframes para exibir quadros. |
| animation-duration | O tempo de um ciclo | Determina a velocidade (FPS). |
Glossário de Animação
- Planilha de Sprites (Sprite Sheet)
- Uma imagem grande contendo várias imagens menores (quadros). Melhora o tempo de carregamento da web.
- Função steps()
- Uma função CSS que altera valores em passos discretos em vez de fluida. Essencial para criar animações sprite.
- @keyframes
- Uma regra CSS usada para definir estados intermediários de uma animação.
- background-position
- Propriedade CSS que especifica a posição inicial do fundo. Deslocar esse valor exibe diferentes quadros.
- Canal Alfa (Alpha Channel)
- Dados de imagem para transparência. Permite lindos gradientes semitransparentes em PNGs.
Perguntas Frequentes
- P.As imagens carregadas são enviadas para um servidor?
- Não. Esta ferramenta processa as imagens diretamente no seu navegador, tornando-a segura para arquivos confidenciais.
- P.Qual a diferença entre GIF e sprites CSS?
- Os GIFs têm suporte limitado a cores (256) e falta de semitransparência. Os sprites CSS usam PNG para imagens de alta qualidade e controle via CSS.
- P.Posso enviar imagens de tamanhos diferentes?
- Não é recomendado. Todos os quadros devem ter dimensões iguais. Caso contrário, a ferramenta irá alinhá-los pelo tamanho da primeira imagem.
- P.Como consertar o desfoque em telas Retina?
- Crie sua planilha com o dobro da resolução desejada e reduza-a via `background-size` no CSS.
- P.Existe um limite de tamanho?
- Mantenha as dimensões abaixo de 2048x2048 para evitar o uso excessivo de memória em dispositivos móveis.
Casos de uso
Animações de Carregamento
Ideais para barras de progresso que funcionam de forma leve via CSS.
Movimentos de Personagens
Crie ações como "andar" ou "correr" para personagens da web.
Ícones de Interface Interativos
Gere animações fluidas ativadas através de efeitos hover (passar o mouse).
Banners Publicitários
Projete banners animados atraentes com qualidade de imagem superior.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.