CSS: animações com Transition e Animation

Introdução

Hoje em dia as animações nos websites vão muito além de simples detalhes, algumas marcas tem 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.

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, 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 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:

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 alguma ação de pseudo seletor (:hover e :focus) ou algum atributo ou classe que seja adicionada em uma tag e 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 possibilidade, podemos manipular a largura e altura dos elementos, sua posição na página e 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 específicar 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 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 propriedades 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

Animation: Animando automaticamente e com mais etapas

Como vimos anteriormente, para animarmos algo com transition, dependemos de alguma ação do usuário 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 propriedae animation.

Para entendermos como fazer a animação do exemplo, precisamos primeiramente entender 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 associarr 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;.

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:

Melhorando a performance de animações com CSS

Esse post é mais introdutório, mas ainda sim 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, confere essa talk do Sérgio Lopes.

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 a melhor alternativa é correr para uma lib que ti 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 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 um 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.