CSS: animações com Transition e Animation

Hoje em dia as animações nos websites vão muito além de simples detalhes, algumas empresas têm nas animações sua marca registrada, tal como o próprio Google após o seu último rebrand.

Vamos abordar técnicas de como fazer animações via CSS e no final, vou deixar uma dica sobre como você pode ter ideias de trazer animações como essa do logo do Google para dentro de uma página web.

Animate.css: o que é?

Animate.css, animation css ou css animate (a grafia pode variar, mas referem-se a mesma coisa), é uma biblioteca de animações CSS pré-desenvolvida que permite adicionar facilmente efeitos de animação aos elementos HTML em seu site.

Ela oferece diversas classes de animação, cada uma correspondendo a um efeito visual específico. Ao adicionar essas classes aos seus elementos HTML, você pode criar transições suaves e atraentes sem a necessidade de escrever um código JavaScript personalizado.

Ela é tão popular devido a sua facilidade de uso e por oferecer uma ampla variedade de efeitos de animação, como fade-in, zoom, bounce, rotate, entre outros. Isso facilita a adição de elementos dinâmicos e interativos às suas páginas da web sem a necessidade de criar manualmente todas as animações.

Transition: a base das animações baseadas em interação

Na web, diversas coisas podem ser animadas, essencialmente tudo o que possui etapas. Seja um formulário de cadastro na hora em que trocamos entre as fases, um produto sendo adicionado em um carrinho de campos ou o surgimento de pedaços da página de acordo com um scroll.

Na prática, boa parte dessas animações acontece após o usuário ou usuária executar uma ação.

Com isso em mente, vamos explorar a propriedade transition que se utilizada junto com os pseudo seletores :hover e :focus do CSS, é possível obter o seguinte resultado:

Na prática, o transition pode ser aplicado para todos os valores que mudam entre os estilos padrões de um elemento e alguma variação aplicada, seja via uma ação de pseudo seletor (:hover e :focus) ou algum atributo, ou classe adicionada em uma tag na qual exista um seletor CSS aplicando alguma variação de estilo.

Somente valores quantificáveis podem ser animados. Isso quer dizer que não é possível fazer uma animação de display indo de none para block, mas sim de opacity de 0 para 1.

Focando na ideia de que Animações são trocas de estados onde podemos visualizar como algo foi de um ponto A para um ponto B, animar o background é só uma das possibilidades.

Também podemos manipular a largura e altura dos elementos, sua posição na página e utilizar uma propriedade que casa super bem com o transition - o transform.

Como o transform pode aplicar diferentes comportamentos a um elemento, como mudar sua escala, alterar sua posição na página ou mesmo aplicar uma distorção com skew(), isso abre todo um leque de possibilidades.

Formas comuns de utilizar o transition

• transition: 1s;: aplica uma animação de 1 segundo para TODAS as propriedades de um seletor; é importante especificar quais propriedades vão ser animadas para evitar alguns gargalos de performance ou propriedades desnecessárias consumindo recursos em animações (que normalmente podem exigir bastante de computadores de usuários ou usuárias com hardwares menos potentes).

• transition: transform 1s, opacity 0.3s; aplica uma animação de 1 segundo para a propriedade transform, e uma de 0.3 segundos para o opacity. Todas as outras propriedades não são afetadas.

• Também é possível especificar um delay para o transition com transition-delay, tal como específicar a duração e as características via propriedades separadas; no dia a dia acabamos utilizando a forma dos exemplos anteriores, mas deixo a dica para você olhar na MDN como trabalhar com essas variações.

CSS Animation: animando automaticamente e com mais etapas

Como vimos anteriormente, para animarmos algo com transition, dependemos de alguma ação do usuário ou usuária. Agora, e se quisermos algo nesse estilo?

Repare que a animação está acontecendo sozinha de forma contínua, bem semelhante a alguns itens que existem para chamar a atenção, como setas indicando que algum ponto é clicável em alguns sites.Para isso ser possível estamos utilizando a propriedade animation.

Para entendermos como fazer a animação do exemplo, precisamos primeiramente compreender a ideia de trabalhar com keyframes. Basicamente, iremos definir que dado um espaço de tempo entre o começo e o fim do mesmo, determinadas propriedades CSS serão aplicadas.

@keyframes go-back {
    0% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

E para associar esses keyframes em um elemento do HTML, precisamos adicionar essa animação go-back, ou qualquer outra, através da propriedade animation:

.quadrado {
    animation: go-back 1s;
}

Porém, dessa forma a animação só acontece uma vez; caso tenhamos interesse em fazê-la acontecer de forma infinita, podemos adicionar a propriedade animation-iteration-count: infinite;.

Ao invés de infinite, podemos passar um número máximo de vezes que nossa animação irá se repetir, e caso você queria fazer a animação ir e voltar do ponto final para o começo e vice-versa, é só adicionar a propriedade animation-direction: alternate;.

Como usar Animate.css

Como vimos, animate css é uma biblioteca de animações CSS pré-definidas que você pode usar facilmente em seus projetos web.

Confira abaixo, alguns passos básicos para começar a usar o animate.css em seu site:

1. Baixe o animate.css:

• Você pode baixar o arquivo CSS diretamente do site oficial do [Animate.css] (https://animate.style/).

• Também pode incluir diretamente de um CDN no seu HTML.

2. Adicione classes de animação:

• O Animate.css oferece diversas classes de animação que você pode adicionar aos seus elementos HTML para aplicar efeitos específicos.

• Você pode usar a classe animate__bounce, por exemplo, para aplicar uma animação de salto a um elemento.

  Olá, mundo!

Dicas de animações comuns em sites

Aqui estão algumas dicas de animações comuns em sites:

Bounce

.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  border: 2px solid #999;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

• FadeIn:

.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Interceptando animations e transitions via JavaScript

Como vimos anteriormente, é possível ter vários níveis de controle nas animações com CSS, porém caso você queria ter um controle mais fino via JavaScript via um elemento.addEventListener é possível monitorar quanto uma transition ou um animation termina:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

Melhorando a performance de animações com CSS

Esse post é mais introdutório, mas ainda assim, acho válido citar que trabalhar com performance em animações pode exigir um pouco de conhecimento de como o browser funciona, e um pouco de como o CSS funciona nos navegadores.

Já adianto que existe uma propriedade que pode fazer milagres em alguns casos para melhorar performance de animações, mas que deve ser usado somente em último caso:

• will-change

E se você quiser ter uma introdução mais profunda do tema de performance em animações, confira essa talk do Sérgio Lopes: Otimizando renderização e animações na Web.

Caso você encontre alguma animação que realmente esteja prejudicando a experiência de usuários em devices menos potentes, você pode desabilitá-la utilizando o @prefers-reduce-motion

Libs extras

• Animate.css: essa provavelmente foi a lib que mais me ajudou na época de agência. E o mais legal, é que existem ports dela para trabalhar com os frameworks da moda via componentes e é uma forma bem legal tanto de fazer algo ficar animado bem rápido ou de abrir o código-fonte e aprender como algumas animações são feitas como, por exemplo, o bounceIn.

• Tweenmax - Greensock: caso você queira fazer algo que possua um controle mais fino de o que é animado em cada tempo ou de acordo com X alteração do usuário, ou usuária, a melhor alternativa é correr para uma lib que te ajude a preparar essas “cenas”. O Tweenmax é uma ótima pedida, só deixo um ponto de observação, pois ela possui algumas restrições de uso gratuito.

• Lottie do Airbnb: essa é a lib do momento, aquela mesma animação do logo do Google, que citei no começo do vídeo. Você pode aprender a fazer nesse alura mais, utilizar o plugin para premiere e exportar para utilizar na web, mas isso podemos abordar em outro artigo.

Por hoje é isso, espero que tenha gostado. Em breve trarei mais dicas!

Não deixe de me seguir nas minhas redes sociais e acompanhar meus outros artigos em meu site pessoal https://mariosouto.com.

E você pode achar muito conteúdo nos nossos cursos de html e css e de bootstrap.