Como criar uma animação CSS3 com sprites. Exemplo Firefox OS

Bem vindo ao Blog Ernande Linhares

16 de Agosto, 2013

Se você utiliza uma versão atualizada do Firefox, deve ter visto, na tela principal, a animação do seu mascote, com a cauda balançando. Tal animação foi criada utilizando uma imagem com características de Sprites e com um pouco de CSS3, com o objetivo de anunciar o Firefox OS.

Observe a imagem:

Como fazer a animação

Para fazer a animação é preciso apenas uma DIV com um ID ou uma CLASS, caso queira utilizar em múltiplos lugares do documento HTML e um outro arquivo CSS que irá utilizar keyframes do CSS3 e atribuir ao ID ou a(s) CLASS(s).

Exemplo do documento HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>Animação Firefox OS, com Sprites</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="sprites-css3.css" />
  </head>
  <body>
    <div class="sprite-sheets-fox"></div>
  </body>
</html>

Exemplo do arquivo CSS:

.sprite-sheets-fox { /* nome da div que será animada*/
    width: 200px;
    height: 224px;
    background-image: url("images/fox.png"); /* caminho da imagem sprite */

    -webkit-animation: fox 2s steps(9) infinite;
      -moz-animation: fox 2s steps(9) infinite;
        -ms-animation: fox 2s steps(9) infinite;
        -o-animation: fox 2s steps(9) infinite;
            animation: fox 2s steps(9) infinite; /* animação fox: percorerá a imagem em 2 segundo em passos de 9 frames, infinitamente*/
}

@-webkit-keyframes fox {
  from { background-position:    0px; }
    to { background-position: -10080px; }
}

@-moz-keyframes fox {
  from { background-position:    0px; }
    to { background-position: -10080px; }
}

@-ms-keyframes fox {
  from { background-position:    0px; }
    to { background-position: -10080px; }
}

@-o-keyframes fox {
  from { background-position:    0px; }
    to { background-position: -10080px; }
}

@keyframes fox {
  from { background-position:    0px; } /* o frame inicial começa na posição 0 da imagem*/
    to { background-position: -10080px; } /* o frame final termina no tamanho total da largura da imagem */
}

Exemplos em funcionamento:

Caso deseje fazer o segundo exemplo, você poderá baixar a imagem aqui.

Observação: o exemplo só irá funcionar em navegadores modernos que tenham suporte para os keyframes, do CSS3. Baixar o exemplo do post