Animações no Tailwind: classes prontas e keyframes personalizados
Guia de animações no Tailwind
Animações no Tailwind: classes prontas e keyframes personalizados | We.Inc
Veja animate-spin, ping, pulse e bounce rodando com o CSS exato e depois adicione keyframes personalizados no Tailwind v4 com @theme, usando um criador de keyframes e dicas sobre movimento reduzido.
O Tailwind traz quatro animações prontas: animate-spin para loaders, animate-ping para pontos de notificação, animate-pulse para skeleton screens e animate-bounce para indicar rolagem, além de animate-none para pará-las. No v4, você cria as suas declarando uma variável --animate-name e os @keyframes dela dentro de @theme, o que gera uma classe animate-name.
Utilitários de animação prontos no Tailwind v4
Classe
Valor
Uso típico
spin 1s linear infinite
Spinners de carregamento
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
Selos de ao vivo ou não lido
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
Placeholders de skeleton
bounce 1s infinite
Setas de rolar para baixo
animation: none
Desligar uma animação em um breakpoint ou estado
Todas as animações prontas abaixo estão rodando ao vivo, ao lado dos keyframes que o Tailwind gera para elas. Depois, crie a sua: escolha o movimento, o tempo e o número de repetições e copie um bloco @theme pronto para o Tailwind v4, ou a configuração equivalente para projetos mais antigos no v3.
Veja as quatro animações prontas e copie a classe de que você precisa.
Ative a pré-visualização de movimento reduzido para ver o que motion-safe e motion-reduce fazem.
Use o criador de keyframes para escolher movimento, duração, easing e número de repetições.
Cole o bloco @theme gerado no arquivo CSS que importa o Tailwind e use a nova classe.
Envolva movimentos decorativos em motion-safe: para que quem pede menos movimento ao sistema não os receba.
Anime transform e opacity. Animar width, height ou top força trabalho de layout a cada frame.
Use animate-[name_duration_easing] para um valor pontual; dentro dos colchetes, os underscores substituem os espaços.
Para hover e mudanças de estado, um utilitário de transition costuma ser melhor que uma animação com keyframes.
Mantenha as animações de entrada curtas, em torno de 150 a 300 milissegundos, para a página nunca parecer lenta.
Perguntas frequentes
Como adicionar uma animação personalizada no Tailwind v4?
Dentro de @theme no seu arquivo CSS principal, declare --animate-wiggle: wiggle 1s ease-in-out infinite; e coloque a regra @keyframes wiggle no mesmo bloco @theme. O Tailwind então gera uma classe animate-wiggle que você pode usar em qualquer lugar.
Para onde foram os keyframes do tailwind.config.js no v4?
O v4 é configurado em CSS, então theme.extend.keyframes e theme.extend.animation viram @keyframes e variáveis --animate-* dentro de @theme. Uma configuração em JavaScript ainda funciona se você carregá-la com a diretiva @config, o que ajuda durante uma migração.
Como fazer uma animação rodar só uma vez?
Tire o infinite do valor e adicione forwards se o elemento precisar ficar no último frame, por exemplo --animate-fade-in: fade-in 0.3s ease-out forwards. Para um caso pontual, você também pode escrever animate-[fade-in_0.3s_ease-out_forwards].
O Tailwind respeita automaticamente as configurações de movimento reduzido?
Não. As variantes motion-safe: e motion-reduce: correspondem à media query prefers-reduced-motion, mas é você quem precisa aplicá-las. Um padrão comum é motion-safe:animate-bounce, que só anima para quem não pediu movimento reduzido.
Para que serve cada animação pronta
O spin gira um elemento uma volta completa a cada segundo e combina com loaders circulares. O ping aumenta uma cópia de um ponto até o dobro do tamanho enquanto a esmaece, o que lembra um pulso de radar; coloque-o em um span com posição absoluta atrás de um ponto sólido.
O pulse baixa a opacidade pela metade e volta ao longo de dois segundos, o visual padrão dos blocos cinza de skeleton enquanto o conteúdo carrega. O bounce sobe um elemento um quarto da altura dele e o deixa cair de volta, o que funciona para uma única seta convidando a rolar, e raramente em outro lugar.
Keyframes personalizados no v4
O Tailwind v4 levou a configuração para o CSS. Qualquer variável no namespace --animate-* dentro de @theme vira um utilitário animate-*, e os @keyframes escritos no mesmo bloco são gerados junto. Não é preciso registrar mais nada.
Mantenha idênticos o nome na variável e o nome em @keyframes. Uma diferença gera uma classe que define uma animação apontando para keyframes que não existem, então nada se move e nenhum erro aparece.
Movimento e acessibilidade
Movimentos grandes, repetitivos ou de parallax podem deixar algumas pessoas mal. Os sistemas operacionais oferecem uma configuração para reduzir o movimento, e os navegadores a repassam ao CSS como prefers-reduced-motion.
Loaders que comunicam status podem manter uma versão suave, enquanto quiques decorativos e efeitos para chamar atenção devem parar. Teste com a configuração ativada, ou com a opção de emulação nas ferramentas de desenvolvedor do seu navegador.
O CSS por trás das classes prontas
Keyframes que o Tailwind v4 gera
Cada classe animate-* define animation com uma variável do tema; estes são os valores e keyframes padrão.
Animações personalizadas no v4 e no v3
Tailwind v4: @theme no seu CSS
Isso cria animate-wiggle e animate-fade-up. Use-as como nomes de classe imediatamente.
A configuração antiga em JavaScript, para projetos que ainda não migraram para o v4.
Usando no markup
Valores arbitrários, uma referência a variável e motion-safe para que o movimento respeite a configuração do sistema.
Keyframes personalizados rodando ao vivo
Wiggle, fade up e um card de skeleton
Equivalentes em CSS puro das classes personalizadas acima, para você editar o tempo e ver a mudança.
As animações prontas, ao vivo
Cada pré-visualização usa a classe real do Tailwind. Ative a pré-visualização de movimento reduzido para ver o motion-safe em ação.
Pré-visualização de movimento reduzido: ativada
Pré-visualização de movimento reduzido: desativada
Criador de keyframes
Escolha movimento, duração, easing e número de repetições, e copie o bloco @theme para o Tailwind v4.