Animation com steps e infinite – CSS3

Animation com steps como em uma animação 2D que nesse exemplo usei 4 steps e dai com sua imaginação e talento com desenhos você pode ir bem longe com essa animação feito apenas com CSS3.

Bom, o que faremos é animação com os Z´s do cachorro dormindo como na imagem acima.

Primeiro a estrutura html teremos apenas um div que darei o nome da class de ‘anime’ e a a imagem do cachorro.

<section>
<div class="anime"></div>
<img src="img/dog.png" alt="Cachorro Dormindo">
</section>

A segunda parte faremos o css que no caso o width e height é o tamanha exato de cada frame de sua animação logo declaramos o background que é a mesma abaixo, só falarei do atributo animation no final, a declaração dos keyframes sempre vem com @keyframes e o nome que você pode escolher para sua animação que no meu caso eu chamei de play como vamos percorrer pela nossa imagem então o atributo que usaremos é background-position colocaremos o from (de) começando do 0px e to (para) o final que é -100px. Agora sim o animation vem com o nome de sua animação declarada nos keyframes, duração da animação que no caso é 4s, steps quantas paradas ela deve percorre width (lagura) e height (altura) declarada na nossa class que será de 4 vezes e o último colocaremos o infinite para o loop infinito.

.anime {
width: 25px;
height: 36px;
background-image: url("img/zzz.png");

-webkit-animation: play 4s steps(4) infinite;
-moz-animation: play 4s steps(4) infinite;
-ms-animation: play 4s steps(4) infinite;
animation: play 4s steps(4) infinite;
}

@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -100px; }
}

@-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -100px; }
}

@-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -100px; }
}

@keyframes play {
from { background-position: 0px; }
to { background-position: -100px; }
}

Link para a Demo.