tailwindcss animate

tailwindcss-animate

Um plug -in CSS para criar belas animações.

 <!-- Add an animated fade and zoom entrance -->
< div class =" animate-in fade-in zoom-in " > ... </ div >

<!-- Add an animated slide to top-left exit -->
< div class =" animate-out slide-out-to-top slide-out-to-left " > ... </ div >

<!-- Control animation duration -->
< div class =" ... duration-300 " > ... </ div >

<!-- Control animation delay -->
< div class =" ... delay-150 " > ... </ div >

<!-- And so much more! --> 

Instalação

Instale o plugin do NPM:

npm install -D tailwindcss-animate

Em seguida, adicione o plugin ao seu arquivo tailwind.config.js :

 // @filename tailwind.config.js
module . exports = {
	theme : {
		// ...
	} ,
	plugins : [
		require ( "tailwindcss-animate" ) ,
		// ...
	] ,
} 

Documentação

• Uso básico
  • Alterando o atraso da animação
  • Mudança de direção de animação
  • Alterando a duração da animação
  • Alterando o modo de preenchimento de animação
  • Mudança de contagem de iteração de animação
  • Mudando o estado de reprodução de animação
  • Mudando a função de tempo de animação
  • Prefere em movimento reduzido
• Inserir e sair animações
  • Adicionando entra animações
  • Adicionando animações de saída
  • Mudança Digite a Opacidade Iniciando da Animação
  • Mudança Enter a rotação inicial da animação
  • Alteração da escala inicial de inserção
  • Alterar Enter Animation Iniciando a tradução
  • Mudança de saída de animação de saída final da opacidade
  • Alteração da rotação final da animação de saída
  • Alteração da escala de final de animação de saída
  • Alterar a tradução da animação de saída

Uso básico

Alterando o atraso da animação

Use os utilitários delay-{amount} para controlar animation-delay de um elemento.

 < button class =" animate-bounce delay-150 duration-300 ... " > Button A </ button >
< button class =" animate-bounce delay-300 duration-300 ... " > Button B </ button >
< button class =" animate-bounce delay-700 duration-300 ... " > Button C </ button >

Saiba mais na documentação de atraso na animação.

Mudança de direção de animação

Use os utilitários direction-{keyword} para controlar animation-delay de um elemento.

 < button class =" animate-bounce direction-normal ... " > Button A </ button >
< button class =" animate-bounce direction-reverse ... " > Button B </ button >
< button class =" animate-bounce direction-alternate ... " > Button C </ button >
< button class =" animate-bounce direction-alternate-reverse ... " > Button C </ button >

Saiba mais na documentação da direção da animação.

Alterando a duração da animação

Use os utilitários duration-{amount} para controlar animation-duration de um elemento.

 < button class =" animate-bounce duration-150 ... " > Button A </ button >
< button class =" animate-bounce duration-300 ... " > Button B </ button >
< button class =" animate-bounce duration-700 ... " > Button C </ button >

Saiba mais na documentação da duração da animação.

Alterando o modo de preenchimento de animação

Use os utilitários de fill-mode-{keyword} para controlar animation-fill-mode de um elemento.

 < button class =" animate-bounce fill-mode-none ... " > Button A </ button >
< button class =" animate-bounce fill-mode-forwards ... " > Button B </ button >
< button class =" animate-bounce fill-mode-backwards ... " > Button C </ button >
< button class =" animate-bounce fill-mode-both ... " > Button C </ button >

Saiba mais na documentação do modo de preenchimento de animação.

Mudança de contagem de iteração de animação

Use os utilitários repeat-{amount} para controlar animation-iteration-count de um elemento.

 < button class =" animate-bounce repeat-0 ... " > Button A </ button >
< button class =" animate-bounce repeat-1 ... " > Button B </ button >
< button class =" animate-bounce repeat-infinite ... " > Button C </ button >

Saiba mais na documentação da contagem de iteração de animação.

Mudando o estado de reprodução de animação

Use os utilitários running e paused para controlar animation-play-state de um elemento.

 < button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >

Saiba mais na documentação do estado da animação.

Mudando a função de tempo de animação

Use os utilitários ease-{keyword} para controlar animation-timing-function de um elemento.

 < button class =" animate-bounce ease-linear ... " > Button A </ button >
< button class =" animate-bounce ease-in ... " > Button B </ button >
< button class =" animate-bounce ease-out ... " > Button C </ button >
< button class =" animate-bounce ease-in-out ... " > Button C </ button >

Saiba mais na documentação da função de tempo de animação.

Prefere em movimento reduzido

Para situações em que o usuário especificou que eles preferem movimento reduzido, você pode aplicar condicionalmente animações e transições usando as variantes motion-safe e motion-reduce :

 < button class =" motion-safe:animate-bounce ... " > Button B </ button >

Inserir e sair animações

Adicionando entra animações

Para fornecer a um elemento uma animação Enter, use o utilitário animate-in , em combinação com algumas utilitárias fade-in , spin-in , zoom-in e slide-in-from .

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in spin-in ... " > Button B </ button >
< button class =" animate-in zoom-in ... " > Button C </ button >
< button class =" animate-in slide-in-from-top ... " > Button D </ button >
< button class =" animate-in slide-in-from-left ... " > Button E </ button >

Saiba mais na documentação de animação Enter.

Adicionando animações de saída

Para dar a um elemento uma animação de saída, use o utilitário animate-out , em combinação com alguns utilitários fade-out , spin-out , zoom-out e slide-out-from .

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out spin-out ... " > Button B </ button >
< button class =" animate-out zoom-out ... " > Button C </ button >
< button class =" animate-out slide-out-from-top ... " > Button D </ button >
< button class =" animate-out slide-out-from-left ... " > Button E </ button >

Saiba mais na documentação da animação de saída.

Mudança Digite a Opacidade Iniciando da Animação

Defina a opacidade inicial de uma animação usando os utilitários fade-in-{amount} .

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in fade-in-25 ... " > Button B </ button >
< button class =" animate-in fade-in-50 ... " > Button C </ button >
< button class =" animate-in fade-in-75 ... " > Button C </ button >

Saiba mais na documentação da Opacity Enter Animation.

Mudança Enter a rotação inicial da animação

Defina a rotação inicial de uma animação usando os utilitários spin-in-{amount} .

 < button class =" animate-in spin-in-1 ... " > Button A </ button >
< button class =" animate-in spin-in-6 ... " > Button B </ button >
< button class =" animate-in spin-in-75 ... " > Button C </ button >
< button class =" animate-in spin-in-90 ... " > Button C </ button >

Saiba mais na documentação de girar a animação Enter.

Alteração da escala inicial de inserção

Defina a escala inicial de uma animação usando os utilitários zoom-in-{amount} .

 < button class =" animate-in zoom-in ... " > Button A </ button >
< button class =" animate-in zoom-in-50 ... " > Button B </ button >
< button class =" animate-in zoom-in-75 ... " > Button C </ button >
< button class =" animate-in zoom-in-95 ... " > Button C </ button >

Saiba mais na documentação da escala de animação Enter.

Alterar Enter Animation Iniciando a tradução

Defina a tradução inicial de uma animação usando os utilitários slide-in-from-{direction}-{amount} .

 < button class =" animate-in slide-in-from-top ... " > Button A </ button >
< button class =" animate-in slide-in-from-bottom-48 ... " > Button B </ button >
< button class =" animate-in slide-in-from-left-72 ... " > Button C </ button >
< button class =" animate-in slide-in-from-right-96 ... " > Button C </ button >

Saiba mais na documentação Enter Animation.

Mudança de saída de animação de saída final da opacidade

Defina a opacidade final de uma animação usando os utilitários fade-out-{amount} .

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out fade-out-25 ... " > Button B </ button >
< button class =" animate-out fade-out-50 ... " > Button C </ button >
< button class =" animate-out fade-out-75 ... " > Button C </ button >

Saiba mais na documentação da opacidade da animação de saída.

Alteração da rotação final da animação de saída

Defina a rotação final de uma animação usando os utilitários spin-out-{amount} .

 < button class =" animate-out spin-out-1 ... " > Button A </ button >
< button class =" animate-out spin-out-6 ... " > Button B </ button >
< button class =" animate-out spin-out-75 ... " > Button C </ button >
< button class =" animate-out spin-out-90 ... " > Button C </ button >

Saiba mais na documentação de rotação da animação de saída.

Alteração da escala de final de animação de saída

Defina a escala final de uma animação usando os utilitários zoom-out-{amount} .

 < button class =" animate-out zoom-out ... " > Button A </ button >
< button class =" animate-out zoom-out-50 ... " > Button B </ button >
< button class =" animate-out zoom-out-75 ... " > Button C </ button >
< button class =" animate-out zoom-out-95 ... " > Button C </ button >

Saiba mais na documentação da escala de animação de saída.

Mudança de animação de saída Terminação

Defina a tradução final de uma animação usando os utilitários slide-out-to-{direction}-{amount} .

 < button class =" animate-out slide-out-to-top ... " > Button A </ button >
< button class =" animate-out slide-out-to-bottom-48 ... " > Button B </ button >
< button class =" animate-out slide-out-to-left-72 ... " > Button C </ button >
< button class =" animate-out slide-out-to-right-96 ... " > Button C </ button >

Saiba mais na animação de saída documentação de tradução.