A capacidade de adicionar movimento e interatividade a elementos da página web pode enriquecer significativamente a experiência do usuário. CSS fornece duas poderosas ferramentas para alcançar esses efeitos: animações e transições.

1. Criando Animações com @keyframes e animation

Animações permitem a alteração de propriedades CSS ao longo do tempo, criando efeitos visuais dinâmicos. Para definir uma animação, você usa a regra @keyframes para especificar os estados iniciais e finais da animação, além de qualquer estado intermediário.

Exemplo de Animação: Pulsar de um Botão

@keyframes pulse {
  0% {
    transform: scale(1);
    background-color: blue;
  }
  50% {
    transform: scale(1.2);
    background-color: red;
  }
  100% {
    transform: scale(1);
    background-color: blue;
  }
}

.button {
  animation: pulse 2s infinite;
}

Como funciona:

• @keyframes pulse: Define a animação chamada pulse.
• 0%, 50%, 100%: Os "frames" da animação, indicando o início, meio e fim.
• transform: scale(1): O estado inicial e final do botão.
• transform: scale(1.2): O estado intermediário, onde o botão aumenta em 20%.
• animation: Aplica a animação pulse ao elemento com classe .button, com duração de 2 segundos, repetindo infinitamente.

2. Suavizando Mudanças com transition

Transições proporcionam uma maneira de controlar a mudança de propriedades CSS de maneira suave e gradual. Ao contrário das animações, transições são ativadas em resposta a ações como hover ou foco.

Exemplo de Transição: Mudança de Cor ao Passar o Mouse

.button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: red;
}

Como funciona:

• transition: Define a transição que ocorre quando a propriedade background-color muda.
• 0.5s: Duração da transição.
• ease-in-out: O tipo de "timing function", que descreve como a velocidade da transição é calculada.
• .button:hover: A transição é ativada quando o mouse está sobre o elemento.