Animações e Transições em CSS

1. Transição com transition

A propriedade transition permite criar efeitos de movimento suaves em elementos da página, fazendo com que a alteração de uma propriedade aconteça gradualmente em vez de instantaneamente.

Nem todas as propriedades CSS podem ser animadas; apenas aquelas com valores numéricos ou interpoláveis, como cores, tamanhos, posições e bordas.

Sintaxe básica

transition: <propriedade> <duração> <função-de-tempo> <atraso>;

• transition-property: define qual propriedade será animada.

• transition-duration: tempo que a transição levará.

• transition-timing-function: controla a velocidade da transição ao longo do tempo.

• transition-delay: tempo de espera antes de iniciar a transição.
  
  

Funções de tempo (transition-timing-function)

• linear: transição constante do início ao fim.

• ease (padrão): começa devagar, acelera no meio e desacelera no final.

• ease-in: começa devagar.

• ease-out: termina devagar.

• ease-in-out: começa e termina devagar, acelerando no meio.

Exemplo prático

div {

  transition: 

    border-radius 2s,       /* anima a borda em 2 segundos */

    transform 3s ease 2s;   /* transforma com duração de 3s, aceleração ease, atraso de 2s */

}

2. Transformações com transform

A propriedade transform permite alterar elementos de forma linear ou 3D, incluindo rotação, escala, inclinação e movimento.

Principais transformações

rotate: gira um elemento em graus.

transform: rotate(10deg);

rotate3d: gira um elemento em torno de um eixo 3D.

transform: rotate3d(1, 0, 0, 45deg); /* eixo X, 45° */

scale: aumenta ou reduz o tamanho do elemento.

transform: scale(1.5); /* 150% do tamanho original */

skew: aplica distorção nos eixos X e Y.

transform: skew(10deg, 15deg);

translate: move um elemento ao longo dos eixos X e Y.

transform: translate(50px, 60px);

perspective: define a distância do ponto de vista do observador (3D).

transform: perspective(500px) rotateX(50deg);

3. Animações com @keyframes

@keyframes permite criar animações complexas, definindo estados iniciais e finais de um elemento ao longo do tempo.

Como usar

@keyframes exemplo {

  from { opacity: 0; }

  to { opacity: 1; }

}

div {

  animation: exemplo 2s ease 1s infinite alternate;

}

Propriedades principais de animação

• animation-name: nome da animação.

• animation-duration: tempo total da animação (s ou ms).

• animation-timing-function: aceleração/desaceleração (igual transition).

• animation-delay: tempo de espera antes de iniciar.

• animation-iteration-count: número de repetições (infinite para repetir indefinidamente).

• animation-direction: direção da animação (normal, reverse, alternate, alternate-reverse).

Sintaxe resumida de animation

animation: <nome> <duração> <função-de-tempo> <atraso> <número-de-repetições> <direção>;

• <nome> → nome da animação (animation-name)

• <duração> → tempo total da animação (animation-duration)

• <função-de-tempo> → aceleração ou desaceleração (animation-timing-function)

• <atraso> → tempo de espera antes de iniciar (animation-delay)

• <número-de-repetições> → quantas vezes a animação será executada (animation-iteration-count)

• <direção> → sentido da animação (animation-direction), como normal, reverse, alternate, alternate-reverse
  
  

Exemplo prático

div {

  animation: exemplo 2s ease 1s infinite alternate;

}

Explicação:

• exemplo → nome da animação definida com @keyframes
  
  

• 2s → duração de 2 segundos

• ease → aceleração suave

• 1s → atraso de 1 segundo antes de iniciar

• infinite → repete indefinidamente

• alternate → alterna a direção a cada repetição