Antigamente se um desenvolvedor quisesse fazer uma animação em algum elemento do HTML ele precisaria usar Flash ou Javascript, mas com a propriedade Animation do CSS3 isso mudou.
@Keyframes
Para fazer uma animação você precisa da regra @Keyframes, dentro dela você vai colocar todas as propriedades que você deseja que sua animação tenha, a regra tem que ter um nome.
Ex:
@Keyframes exemplo{
}
A configuração de um @Keyframe
Agora vamos começar a entender como funciona um @Keyframes e quais regras vai dentro dele. O from indica o estado inicial é quando a animação esta em 0%, o To é quando ela chega a 100%. Dentro do From e do To você pode colocar as regras que quiser, tudo vai depender da sua imaginação.
@Keyframes exemplo{
from{top:0; left: 0; right:0;}/**aqui é onde a animação inicia**/
to{top:100px; left: 100px; right: 150px;}/**aqui é onde ela termina**/
}
Outro método para fazer sua animação funcionar sem usar o From e To é usar a porcentagem.
Ex:
@Keyframes exemplo{
0% { left:0px; top:0px; right:0;}
25%{ left:200px; top:100px; right:50px;}
50% { left:210px; top:200px;right:55px;}
75%{ left:0px; top:200px;right:60px;}
100% { left:0px; top:0px;right:80px;}
Animation-name e Animation-duration
Toda animação precisa de um nome e uma duração , essas propriedades ficam dentro da regra que vai receber a animação elas são obrigatórias e para sua animação funcionar você vai ter que usar elas.
Ex:
.animation{
width: 150px;
height: 150px;
background: red;
animation-name: exemplo;
animation-duration:5s;
position: relative;
}
Animation Delay
Com essa propriedade é possível adicionar um atraso a animação antes dela começar essa propriedade é totalmente opcional cabe a você decidir se vai usar ou não.
.animation{
width: 150px;
height: 150px;
background: red;
animation-name: exemplo;
animation-duration:5s;
animation-delay:2s;/**a animação vai ter um delay(atraso) de 2 segundos antes de começar**/
position: relative;
}
Animation-iteration-count
Se você quiser que sua animação se repita um numero de vezes ou infinitamente é essa propriedade que você deve usar ela pode levar um valor numérico ou o infinite que vai fazer com que sua animação aconteça para sempre, sem interrupção.
.animation{
width: 150px;
height: 150px;
background: red;
animation-name: exemplo;
animation-duration:5s;
animation-delay:2s;
animation-iteration-count: infinite;
position: relative;
}
Essas são as propriedades básicas para uma animação funcionar, se você quiser saber sobre mais algumas propriedades é só acessar esse site: http://www.w3schools.com/css/css3_animations.asp
Caso você não queira colocar a mão na massa, existe também diversas bibliotecas de animações na internet, basta dar uma procurada.
Exemplo de Animação no Codepen:
preloadweb 