Transition e Animation no CSS, como e quando usar

As interfaces hoje em dia estão cada vez mais interativas, com mais dinamismo e até com animações mais complexas. Por causa disso, duas propriedades do CSS viraram essenciais: transition e animation. O problema é que muita gente nem sabe direito o que cada uma faz, muito menos a diferença entre elas, e acaba usando do jeito errado. Vou explicar as duas com exemplos práticos.

Transition não é uma ação, é uma configuração

Esse é o erro mais comum. A propriedade transition não faz nenhum efeito visual sozinha. Ela apenas configura como um elemento deve se comportar quando alguma propriedade dele mudar, ou seja, quando houver uma transição de valores.

Imagina um botão com fundo branco. Ao passar o mouse, o fundo muda para cinza:

.btn {
  background-color: #fff;
}
 
.btn:hover {
  background-color: #999;
}

Sem transition, essa mudança acontece instantaneamente, em zero segundos. O que o transition faz é atrasar e suavizar essa mudança, tanto em termos de tempo quanto na forma como ela acontece.

E aqui está o ponto que mais gera confusão: o transition deve ser colocado no elemento, nunca dentro do :hover. Muita gente coloca dentro do hover achando que é uma ação que precisa ser disparada ali, mas não é assim que funciona. Você configura no elemento, e sempre que alguma propriedade dele mudar, a transição já está pré-configurada para entrar em ação.

.btn {
  background-color: #fff;
  transition: all 1s linear;
}
 
.btn:hover {
  background-color: #999;
}

O transition recebe três informações principais:

• O que monitorar: all monitora qualquer propriedade que mudar. Se você colocar color, por exemplo, ele só vai reagir a propriedades relacionadas a cor, como a cor do texto ou da borda. Atenção: background-color não entra nesse grupo, então se você quer que ele também seja suavizado, precisa usar all.
• Duração: quanto tempo a transição vai levar, como 1s ou 0.3s.
• Tipo de transição (timing function): linear é a mais usada e faz a mudança acontecer de forma constante, sem variação de velocidade. Também existem ease-in, que começa devagar e acelera, e ease-in-out, que começa devagar, acelera no meio e desacelera de novo no final.

Com isso configurado, qualquer mudança de propriedade no elemento passa a acontecer de forma suave, no tempo que você definiu, em vez de mudar de forma abrupta.

Animation é uma ação

Diferente do transition, a animation é uma ação de verdade. Ela roda no momento em que você define, seja assim que a página carrega, seja quando o usuário passa o mouse, dependendo de onde você aplica a propriedade.

Criar uma animação exige dois passos: primeiro você define a sequência de mudanças através de um @keyframes, depois aplica essa animação em um ou mais elementos.

@keyframes shake {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Aqui eu defini três momentos: no início a escala é normal, no meio o elemento cresce 10%, e no final ele volta ao tamanho original. Isso ainda não está aplicado em lugar nenhum, é só a definição da animação.

Para aplicar, uso a propriedade animation, que também recebe quatro informações principais:

.btn:hover {
  animation: shake 0.3s linear 2;
}

• Nome da animação: o mesmo nome definido no @keyframes, no caso shake.
• Duração: quanto tempo o ciclo completo (0% a 100%) vai levar.
• Tipo de transição: funciona igual ao transition, pode ser linear, ease-in, ease-in-out, etc.
• Quantas vezes repetir: um número fixo, como 2, ou infinite para repetir enquanto a condição que disparou a animação continuar ativa (nesse exemplo, enquanto o mouse estiver sobre o botão).

Se você colocar a animação direto no elemento em vez de dentro do :hover, ela roda assim que a página carrega. Com infinite, roda sem parar. Com um número fixo, roda aquela quantidade de vezes e para, o que é ótimo para chamar atenção para um botão sem deixá-lo balançando pra sempre.

Dá pra ir além e combinar mais de uma propriedade no mesmo keyframe, como um leve giro junto com a escala:

@keyframes shake {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

Os dois funcionam juntos, sem problema

Uma coisa importante: transition e animation não competem entre si. Dá pra ter os dois configurados no mesmo elemento ao mesmo tempo. No exemplo do botão, o transition continua suavizando a mudança de cor de fundo enquanto a animation faz o efeito de balançar, cada um cuidando da sua parte.

Resumindo

transition é configuração: você define no elemento como ele deve reagir quando uma propriedade mudar de valor. animation é ação: você define uma sequência de mudanças com @keyframes e aplica onde e quando quiser que ela rode.

Entendendo essa diferença, fica muito mais fácil saber onde colocar cada propriedade e parar de quebrar a cabeça tentando descobrir por que uma transição não está funcionando.

Se esse post te ajudou a entender a diferença entre as duas, deixa aqui nos comentários que tipo de conteúdo sobre CSS você gostaria de ver por aqui.