CSS permite a animação de elementos HTML sem usar JavaScript ou Flash!

 

Neste capítulo, você aprenderá sobre as seguintes propriedades:

 

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 @keyframes regra, 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.

O exemplo a seguir vincula a animação "exemplo" ao elemento <div>. A animação durará 4 segundos e mudará gradualmente a cor de fundo do elemento <div> de "vermelho" para "amarelo":

 

Exemplo

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

 

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). 

No exemplo acima, especificamos quando o estilo será alterado usando as palavras-chave "de" e "para" (que representa 0% (início) e 100% (completo)).

Também é possível usar por cento. Usando porcentagem, você pode adicionar quantas mudanças de estilo desejar.

O exemplo a seguir 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:

 

/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

 

O exemplo a seguir mudará a cor de fundo e a posição do elemento <div> quando a animação estiver 25% concluída, 50% concluída e novamente quando a animação estiver 100% concluída:

 

/* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

 

Caio Vargas
Atendimento Whatsapp
Iniciar Atendimento!