Utilizando Transições e Animações com o Tailwind

Nos dias atuais onde existem milhões de aplicações e websites espalhados por aí, qualquer toque a mais ou a menos já é motivo para um usuário ficar na nossa página ou procurar outra mais interativa. Com isso, a forma como são feitas as transições e animações das nossas aplicações são elementos cruciais para a experiência do usuário, pois particularizam seu contato e proporcionam conforto e acolhimento.

Pensando nisso, escolhi como tema deste artigo um tutorial onde aprenderemos como utilizar transições e animações com o Tailwind, um framework que cada vez mais ganha força no mercado de trabalho voltado ao front-end. Sendo assim, já vai pensando em todas aquelas animações que você já lidou em sites e que se apaixonou, porque hoje você sai daqui sabendo como criá-las!

O que é o Tailwind CSS?

O Tailwind é um framework criado com o intuito de otimizar o uso do CSS. Ao invés da estilização ser feita por classes criadas manualmente pelo programador (onde seus atributos são definidos em um arquivo importado com extensão .css).

Este framework disponibiliza um conjunto de classes arquitetadas no modelo atomic css, onde cada classe possui um única função, como por exemplo, aplicar a cor vermelha para o background de um elemento ou transformar o seu texto em itálico. Todo este conjunto de classes pode ser encontrado na documentação do Tailwind CSS e, mesmo que nenhuma delas corresponda a sua necessidade, você também pode criar uma nova que o faça!

Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind CSS, que, além de ser auto intuitivo possui uma documentação de fácil aprendizado e rápida busca: basta colocar o nome do atributo (como por exemplo: object-fit, margin, ou display) que é disponibilizado o nome da classe que atende à demanda e como utilizá-la.

Dicas para utilizar o Tailwind CSS

Existem diversas formas de instalar o Tailwind CSS no seu projeto de acordo com a tecnologia que você está utilizando. Na documentação deste framework há um guia prático para cada cenário onde ele pode ser utilizado. Basta seguir o passo a passo específico em que sua situação se encaixa e ser feliz!

OBS: A forma mais rápida de se implementar o Tailwind é inserindo o CDN disponibilizado pela documentação. É só adicioná-lo no head do seu documento HTML e deixar que ele faça toda a magia. Dito isto, vamos em frente?

O que são transições e animações?

Transições e animações podem ser descritos como um conjunto de definições que mudarão o comportamento de determinado elemento ou conjunto de elementos ao longo de um determinado tempo ou interação, como por exemplo, passar o mouse sobre um botão e ter a cor do background alterado. Ao colocar a mão na massa, todos estes conceitos ficaram melhor entendidos, então não percamos tempo!

Definindo propriedades para uma Transição

O Tailwind proporciona para seus usuários diversas classes que, ao serem utilizadas, habilitam um conjunto de transições em determinado elemento. São elas:

• transition-all: cria uma transição para todas as propriedades de um elemento;
• transition: cria uma transição apenas para as propriedades color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter e backdrop-filter;
• transition-colors: cria uma transição apenas para as propriedades relacionadas à cores, que são color, background-color, border-color, text-decoration-color, fill e stroke;
• transition-opacity: cria uma transição apenas para a opacidade de um elemento;
• transition-shadow: define uma transição apenas para a propriedade box-shadow do elemento;
• transition-transform:cria uma transição apenas para a propriedade transform do elemento.
  

É certo que, utilizando a classe transition-all, você resolve todos os seus problemas referentes à transições, mas nem sempre desejamos que todas as propriedades o tenham. É nesse momento que as demais classes citadas têm seu valor.

Para que você note a diferença e a importância de transições em uma aplicação, utilizaremos o seguinte exemplo:

No código da Figura 2, foi criado um contêiner principal, que organiza seus elementos com um grid, com duas colunas e uma única linha. Dentro dele, existem dois contêineres que possuem o mesmo conjunto de classes, exceto pela transition-all que só foi incluída em um deles. Foram criados diversos hovers para que, ao passarmos o mouse por cima dos elementos, aconteçam mudanças de cor, espessura, tamanho do texto e imagem de background. A diferença de se utilizar transições para estas mudanças ao invés de não utilizar é gritante:

Definindo uma duração para Transições

As transições, por padrão, possuem um tempo de duração de 150 milissegundos. Todavia, é possível customizar este tempo: a notação para utilizar esta funcionalidade é duration-{tempo}, onde o valor para o tempo pode ser 75, 100, 150, 200, 300, 500, 700 e 1000, representando milissegundos. Vejamos um exemplo com o mesmo código que utilizamos na Figura 2, com a diferença de que utilizaremos a classe transition-all em ambos, porém uma duração de 150 ms para um e de 1000 ms para outro:

Transition Delay

É possível definir um tempo de espera para que determinada transição comece a acontecer. A notação para utilizar esta funcionalidade é delay-{tempo} onde, assim como nas classes de duration, o valor do tempo pode ser 75, 100, 150, 200, 300, 500, 700 e 1000, representando milissegundos. Para visualizarmos o funcionamento, vamos definir uma mesma duração para nossa transição em ambos os contêineres do exemplos, mas com delays diferentes:

Transition Timing Function

Podemos definir como determinada transição se comporta ao longo do tempo de duração em que ela é executada (como por exemplo: configurar uma transição para que execute de forma mais devagar no começo e mais rápida no fim). Existem quatro classes que nos concedem opções de configurar esta funcionalidade:

• ease-linear: distribui um tempo constante e igual para a transição inteira, do começo ao fim;
• ease-in: define uma transição mais lenta no início;
• ease-out: aplica uma transição mais lenta no final;
• ease-in-out: aplica uma transição lenta no início e no fim.
  

No exemplo a seguir, utilizamos as mesmas definições de duração e transição, com a exceção das classes ease-in e ease-out, uma para cada contêiner:

Animation

As animações são conjuntos robustos de transições, combinados para formar interações incríveis. O Tailwind CSS disponibiliza quatro principais animações, o que não impede que você crie as suas próprias, como mostraremos mais à frente. São estas quatro animações:

Spin

Por meio da classe animate-spin podemos aplicar um efeito de rotação linear elementos, conforme mostra o exemplo das Figuras 10 e 11:

Ping

Com a classe animate-ping, podemos fazer um elemento se expandir e desaparecer. Veja sua aplicação nas Figuras 12 e 13:

Pulse

Por meio da classe animate-pulse, podemos fazer com que um elemento literalmente pulse, variando sua opacidade entre parcial e total:

Bounce

Utilizando a classe animate-bounce, podemos fazer um elemento saltar para cima e para baixo, conforme no exemplo das Figuras 16 e 17.

Criando suas próprias animações

Independente da forma como você configurou o seu Tailwind, deve ter notado que, seja por meio de um script no head do arquivo HTML,ou, pela criação de um arquivo separado, em algum momento você implementou um Tailwind.config (o modelo dele está na Figura 18). É nele que iremos trabalhar.

Existem duas formas de criar animações no Tailwind.config. A primeira é utilizando keyframes, onde podemos indicar o que acontecerá em cada momento da animação. Depois, utilizamos o objeto animation para utilizar a keyframe criada e transformar tudo em uma animação com tempo e modo de execução, duração e delay (se necessário):

Para isto, criamos um objeto chamado keyframes dentro de extend. Em keyframes, criamos um novo objeto onde a chave indicará o momento da animação em porcentagem (por meio de uma string) e o valor será o que acontecerá neste momento. Este valor, por sua vez, também deve ser um objeto, onde cada chave será uma propriedade que queremos que seja alterada no momento selecionado da animação.

A outra forma de criar uma animação personalizada é utilizar apenas o objeto animation aplicado a uma animação já existente, como por exemplo spin, bounce, etc. Desta forma, é possível alterar certas propriedades de uma animação, como por exemplo, executá-la de forma mais lenta. Que tal fazermos isso com a animação spin?

Considerações Finais

Animações e transições são propriedades e conceitos incríveis, que fazem com que nossas aplicações venham se destacar das demais. Agora, com a faca e o queijo na mão, você pode fazer tudo o que quiser, se valendo das classes já disponibilizadas pelo Tailwind CSS ou criando novas, como foi apresentado.

Caso queira tirar quaisquer dúvidas ou somente bater um papo sobre esses e mais assuntos de outra forma, você também pode entrar em contato comigo pelo e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do Linkedin.

Te espero ansiosamente! Bons estudos e até a próxima!