Transitions
As "transitions" (transições) em CSS são usadas para controlar a mudança gradual entre os estados de um elemento. A ideia é que, em vez de fazer mudanças instantâneas de uma propriedade para outra, você pode fazer com que essa mudança ocorra ao longo de um determinado período de tempo.
Por exemplo, imagine um bloco que você quer deslocar da esquerda para a direita em um segundo, em vez de instantaneamente. Você usaria o seguinte código:
#bloco { width: 100px; height: 100px; background: blue; transition: left 1s; position: absolute; left: 0; } #bloco:hover { left: 100px; } Neste caso, o bloco azul se deslocaria gradualmente para a direita ao longo de 1 segundo quando você passa o mouse sobre ele.
Animações
Animações no CSS vão um passo além das transições, permitindo mais controle sobre o comportamento de um elemento ao longo do tempo. Enquanto as transições apenas permitem mudanças simples de uma propriedade para outra, as animações podem mudar várias propriedades em momentos diferentes.
As animações são definidas com a regra @keyframes, que especifica os estados iniciais e finais das propriedades do CSS, e possivelmente estados intermediários.
Por exemplo, imagine um bloco que você quer mover em um padrão de quadrado. Você usaria o seguinte código:
Neste exemplo, o bloco se move em um padrão de quadrado, voltando à sua posição original e repetindo a animação (infinite) a cada 4 segundos (4s).
@keyframes mover-em-quadrado { 0% { left: 0; top: 0; } 25% { left: 100px; top: 0; } 50% { left: 100px; top: 100px; } 75% { left: 0; top: 100px; } 100% { left: 0; top: 0; } } #bloco { width: 100px; height: 100px; background: red; position: absolute; animation: mover-em-quadrado 4s infinite; }