Com o css 3 é possível fazer animações. As animações se baseiam na aplicação de estilos em relação ao tempo determinado na animação, definimos um estilo no tempo x e um outro no tempo x2, então o CSS se encarregará de criar as variações do estilo x até x2. A figura 1 nos ajuda a entender melhor:

exemplo-bloco-sendo-animado

Na figura 1 o quadrado azul se deslocará da posição inicial até a posição final, o intervalo de quadros necessários para criar esta sensação de deslocamento será gerado automaticamente pelo CSS. O recurso utilizado para determinar o que acontece ao longo do tempo se chama @keyframes.
Então, podemos escrever uma pequena animação para o nosso quadrado azul. Ficaria assim:

O código HTML:

<div class="container">
<div class="quadrado"></div>
</div>

O código CSS:

.container {
    position: relative;
    background-color: grey;
    height: 300px;
    padding: 30px;
} 

.quadrado {
    width: 300px;
    height: 300px;
    background-color: blue;
    position: absolute;
    bottom: 30;
    
    animation-name: moverQuadrado;
    animation-duration: 2s;
}

@keyframes moverQuadrado {
    from {
        left: 0px;
    }
    to {
        left: 500px;
    }    
}

Observe no código css que a linha 15 usa a propriedade animation-name para definir o nome dos keyframes vinculados ao elemento, já na linha 16 a propriedade animation-duration define qual será o tempo da animação.
Dentro do @keyframes definimos que o elemento começa (from) com left: 0px e vai até (to) left: 500px;

Para ver este script em ação clique aqui.

Animando outras propriedades

Também podemos criar animações que alteram outras propriedades, tais como a cor.  O CSS se encarregará de criar as transições de cor entre os intervalos definidos.

.quadrado {
    width: 300px;
    height: 300px;
    animation-name: coloRirQuadrados;
    animation-duration: 4s;
}

@keyframes coloRirQuadrados {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}  
}

Para ver como ficou nosso quadrado colorido clique aqui.

Adicionando um cenário e um personagem

et

Podemos brincar um pouco e fazer algumas animações usando imagens, uma imagem de background e outra para ser uma personagem.
Nosso HTML para receber um cenário e um disco voador :

<div class="container">
	<img class="disco-voador" src="nave.png" />
</div>

O código css para fazer andar nosso disco voador pela cidade:

.container {
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #3B9FFB;
    background-image: url("cidade.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

.disco-voador {
    position: absolute;
    width: 300px;
    height: auto;
    animation-name: animarDiscoVoador;
    animation-duration: 4s;    
}

@keyframes animarDiscoVoador {
    0%   {
        left:0px;
        top:0px;
    }
    25%  {
        left:700px;
        top:0px;
    }
    50%  {
        left:700px;
        top:200px;
    }
    75%  {
        left:0px; 
        top:200px;
    }
    100% {
        left:0px;
        top:0px;
    }
}

Para ver nosso disco voador andando pela cidade clique aqui.

Atrase o início da animação


Através da propriedade animation-delay é possível fazer uma animação começar após determinado tempo.
HTML para animar um ferrari:

<div class="container">
	<img class="carro" src="ferrari.png" />
</div>

CSS para animar a ferrari do Rubinho após um delay (atraso!) de 2 segundos:

.container {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: gray;    
}

.carro {
    position: absolute;
    bottom: 0;
    width: 300px;
    height: auto;
    animation-name: animarCarro;
    animation-duration: 4s;  
    animation-delay: 2s;
}

@keyframes animarCarro {
    0%   {
        left: 0;
    }
    100% {
        left: 700px;
    }
}

Para ver a ferrari atrasada do Rubinho clique aqui.