Propriedades de Animação:

@keyframes

Essa é a propriedade que cria a animação. Virá seguida do nome da animação inventada e em seguida todas as caracteristicas de comportamento da animação.

animation-name:nome

"nome" representa o nome da animação escolhido.

animation-duration:tempo em segundos

Essa propriedade indicará o tempo duradouro da animação.

animation-timing-function:valor

Essa propriedade indicará a aceleração da animação(os valores são: linear, ease,ease-in,ease-out, ease-in-out e cubic-bezier(n,n,n,n)).

animation-delay:tempo em segundos

Essa propriedade indicará o tempo que demorará para ocorrer a animação.

animation-iteration-count:valor

Essa propriedade definirá a quantidade de vezes que a animação irá ocorrer. O valor pode ser qualquer número ou "infinite" para que não pare de ocorrer.

animation-direction:valor

Essa propriedade indica se a animação ocorrerá em um único sentido ou se poderá ocorrer alternadamente, por exemplo, no sentido indicado e em seguida no sentido reverso, ocorrendo isso alternadamente. Então seus valores podem ser "normal" ou "alternate".

animation-play-state:valor

Essa propriedade indica se a animação ficará parada(em pausa) ou ocorrendo(em funcionamento). Seus valores são "paused" e "running".

Repare que a div deve estar definida como "position:relative" para poder se mover sobre outros objetos. Não funciona com internet explorer.

A propriedade "transform:rotate(Xdeg)" foi usada para que o objeto fique girando sobre si mesmo como se pode ver.

Embora não exposto no código, foi colocado uma imagem dentro da div que está em animação.