Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the acf domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/u810915952/domains/romulobrasil.com/public_html/wp-includes/functions.php on line 6121
Animation com steps e infinite - CSS3 - Rômulo Brasil

Animation com steps e infinite – CSS3

• Publicado em: janeiro 27, 2014

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.

dog

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.

 

zzz

 

.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.