Animações em

CSS
P RO F ª D A I A N I ME LO
Introdução
A propriedade trasition trabalha de forma muito simples e inflexível.
Você praticamente diz para o browser qual o valor inicial e o valor final
para que ele aplique a transição automaticamente, controlamos
praticamente apenas o tempo de execução.
 Para termos mais controle sobre a animação temos a propriedade
animation que trabalha juntamente com a regra do keyframe (quadro-
chave).
O que são animações CSS?
Uma animação permite que um elemento mude gradualmente de um estilo para
outro.
Você pode alterar quantas propriedades CSS quiser, quantas vezes quiser.

Para usar animação CSS, você deve primeiro especificar alguns quadros-chave
para a animação.
Os quadros-chave contêm os estilos que o elemento terá em determinados
momentos.
A regra @keyframes
Quando você especifica estilos CSS dentro da regra @keyframes, a
animação mudará gradualmente do estilo atual para o novo estilo em
determinados momentos.

Para fazer uma animação funcionar, você deve vincular a animação

a um elemento.
Exemplo 1
Neste exemplo criamos uma div quer terá
uma animação (onde mudará a cor de fundo
de vermelho para amarelo em 5s.

Observação:

a animation-durationpropriedade define
quanto tempo uma animação deve levar para
ser concluída.

Se a animation-durationpropriedade não
for especificada, nenhuma animação
ocorrerá, pois o valor padrão é 0s (0
segundos).
Exemplo 2
Neste segundo exemplo, foram adicionados
mais quadros-chaves.

A animação mudará a cor de fundo do

elemento <div> quando a animação estiver
25% concluída, 50% concluída e novamente
quando a animação estiver 100% concluída
Exemplo 3
Neste exemplo, haverá a alteração da
posição do elemento.
Exemplo 4
Neste exemplo, adicionamos uma imagem e a duração infinita
da animação.
Exemplo 5
O exemplo a seguir usa o valor "alternate" para fazer a animação
rodar primeiro para a frente e depois para trás:
Exemplo 6
Neste exemplo, adicionamos a transformação para inverter
a imagem.
Atividades
Realize os exemplos desta apresentação.