{"id":790,"date":"2020-07-09T12:30:50","date_gmt":"2020-07-09T15:30:50","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=790"},"modified":"2022-12-09T08:21:58","modified_gmt":"2022-12-09T11:21:58","slug":"criando-uma-animacoes-em-css-sprite-sheet-com-steps","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/","title":{"rendered":"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com  steps()"},"content":{"rendered":"<p>Existe uma fun\u00e7\u00e3o\u00a0 pouco conhecida nas anima\u00e7\u00f5es CSS que permite dividir uma anima\u00e7\u00e3o em segmentos &#8211; ou etapas &#8211; em vez de execut\u00e1-la como uma anima\u00e7\u00e3o cont\u00ednua do in\u00edcio ao fim.<\/p>\n<p>Essa fun\u00e7\u00e3o \u00e9 \u00fatil para criar anima\u00e7\u00f5es de folhas de sprite, e exibir com precis\u00e3o cada imagem de sprite como um quadro, sem efeitos de facilita\u00e7\u00e3o entre eles.<\/p>\n<p>&nbsp;<\/p>\n<p>Veja como vai ficar no final de tudo<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.joemaster.com.br\/codigos\/exemplos\/animacao.html\" name=\"animacao\" width=\"100%\" height=\"300\" frameborder=\"0\" scrolling=\"yes\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h2>Come\u00e7ando a anima\u00e7\u00e3o<\/h2>\n<p>Vamos procurar uma imagem no google\u00a0 com o seguinte termo: <strong>imagem sprites<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p id=\"BygJmUg\"><img decoding=\"async\" loading=\"lazy\" width=\"1173\" height=\"700\" class=\"alignnone size-full wp-image-792 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-5.jpg\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-5.jpg 1173w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-5-300x179.jpg 300w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-5-1024x611.jpg 1024w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-5-768x458.jpg 768w\" sizes=\"(max-width: 1173px) 100vw, 1173px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Eu escolhi essa:<\/p>\n<p>&nbsp;<\/p>\n<p id=\"MEahzqw\"><img decoding=\"async\" loading=\"lazy\" width=\"626\" height=\"369\" class=\"alignnone size-full wp-image-791 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg 626w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6-300x177.jpg 300w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ela tem um tamanho de: <strong><code>626x369<\/code><\/strong><\/p>\n<p id=\"Rbkvbhu\"><img decoding=\"async\" loading=\"lazy\" width=\"680\" height=\"100\" class=\"alignnone size-full wp-image-793 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-4.jpg\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-4.jpg 680w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-4-300x44.jpg 300w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n<h2>Animando com a fun\u00e7\u00e3o steps ()<\/h2>\n<p>Com\u00a0 <code>steps()<\/code> somos capazes de controlar a quantidade de keyframes prestados na dura\u00e7\u00e3o de uma anima\u00e7\u00e3o; ele progride a anima\u00e7\u00e3o em etapas equidistantes com base no valor que definimos.<\/p>\n<p>Sabendo disso, vamos usar <code>steps()<\/code> para criar uma simples anima\u00e7\u00e3o.<\/p>\n<p>&nbsp;<\/p>\n<h2>Criando os elementos da anima\u00e7\u00e3o<\/h2>\n<p>Para animar nosso personagem, primeiro criaremos uma regra na qual definiremos as dimens\u00f5es de largura e altura e exibiremos a div principal do <code>sprite<\/code> como uma imagem de fundo.<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt;\r\n.personagem{ \r\n  width: 626px; \r\n  height: 369px; \r\n  margin: 2% auto;\r\n  background:url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg'); \r\nbackground-repeat:repeat;\r\n}\r\n&lt;\/style&gt;\r\n&lt;div class=\"personagem\"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;xxx&lt;\/div&gt;<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<p>Nesse ponto, agora pegamos o tamanho da figura em width, e colocamos ela com sinal negativo.<\/p>\n<pre><code>@keyframes play {\r\n   100% { background-position: -626px; }\r\n}<\/code><\/pre>\n<p>Agora vamos executar a anima\u00e7\u00e3o<\/p>\n<p>&nbsp;<\/p>\n<p>Sem step definido<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt; \r\nbody {\r\n  background: #24aecd;\r\n}\r\n\r\n.personagem {\r\n  width: 626px;\r\n  height: 369px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;\r\n  animation: play .8s  infinite;\r\n}\r\n\r\n@keyframes play {\r\n    100% { background-position: -626px; }\r\n}\r\n&lt;\/style&gt; \r\n\r\n&lt;div class=\"personagem\"&gt;&lt;\/div&gt;\r\n\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>Com step definido<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt; \r\nbody {\r\n  background: #24aecd;\r\n}\r\n\r\n.personagem {\r\n  width: 626px;\r\n  height: 369px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;\r\n  animation: play .8s steps(10) infinite;\r\n}\r\n\r\n@keyframes play {\r\n    100% { background-position: -626px; }\r\n}\r\n&lt;\/style&gt; \r\n\r\n&lt;div class=\"personagem\"&gt;&lt;\/div&gt;\r\n\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<h2>Explicacando o c\u00f3digo&#8230;<\/h2>\n<p>Quando vinculamos a <code>play<\/code> sequ\u00eancia de anima\u00e7\u00e3o ao personagem com uma dura\u00e7\u00e3o de 0,8s, vemos a posi\u00e7\u00e3o de segundo plano de nossa planilha de sprites animando rapidamente da esquerda para a direita.<\/p>\n<p><code>.personagem {<\/code><br \/>\n<code>...<\/code><br \/>\n<code>animation: play 0.8s;<\/code><br \/>\n<code>}<\/code><\/p>\n<p>&nbsp;<\/p>\n<p>Para obter o efeito de anima\u00e7\u00e3o quadro a quadro desejado, precisamos incluir a fun\u00e7\u00e3o <code>steps()<\/code> de temporiza\u00e7\u00e3o no <code>animation<\/code> .<\/p>\n<p>Como a folha de sprite cont\u00e9m 10 sprites de imagem, podemos dizer que \u00e9 composta de 10 quadros &#8211; ou etapas.<\/p>\n<p>Ent\u00e3o, vamos definir 10 etapas em nossa sequ\u00eancia de anima\u00e7\u00e3o:<\/p>\n<p><code>.personagem <\/code><br \/>\n<code>...<\/code><br \/>\n<code>animation: play 0.8s steps(10);<\/code><br \/>\n<code>}<\/code><\/p>\n<p>Agora, a anima\u00e7\u00e3o executar\u00e1 10 quadros em sua dura\u00e7\u00e3o de 0,8s &#8211; ela usa a anima\u00e7\u00e3o da posi\u00e7\u00e3o de fundo para percorrer cada imagem do sprite como uma etapa.<\/p>\n<p>Finalmente, se ir na linha<code> animation:<\/code>\u00a0 e colocar no final <code>infinite<\/code>, ele ir\u00e1 processar um loop de repeti\u00e7\u00e3o de anima\u00e7\u00e3o.<\/p>\n<p><code>.personagem {<\/code><br \/>\n<code>...<\/code><br \/>\n<code>animation: play 0.8s steps(10) infinite;<\/code><br \/>\n<code>}<\/code><\/p>\n<p>Para alterar a velocidade da anima\u00e7\u00e3o, basta alterar o <code>animation-duration<\/code> <code>0.8s<\/code><\/p>\n<p><strong>No exemplo abaixo vou mudar para 2 segundos<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt; \r\nbody {\r\n  background: #24aecd;\r\n}\r\n\r\n.personagem {\r\n  width: 626px;\r\n  height: 369px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;\r\n  animation: play 2s steps(10) infinite;\r\n}\r\n\r\n@keyframes play {\r\n    100% { background-position: -626px; }\r\n}\r\n&lt;\/style&gt; \r\n\r\n&lt;div class=\"personagem\"&gt;&lt;\/div&gt;\r\n\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<p>Vamos deixar um pouco mais avan\u00e7ado nosso c\u00f3digo. Se por exemplo, voc\u00ea quer pegar s\u00f3 a terceira linha da anima\u00e7\u00e3o. Ai teremos que pegar as coordenadas\u00a0 do fundo da imagem para mostrar. Veja abaixo como fazer.<\/p>\n<p>Como n\u00e3o sabemos as coordenadas da imagem, podemos ir tentando at\u00e9 achar, ou\u00a0 acessar o seguinte site, e achar as coordenadas.<\/p>\n<p><a href=\"https:\/\/www.web2generators.com\/graphism-tools\/css-sprite-creator\" target=\"_blank\" rel=\"noopener noreferrer\">Web2generators<\/a><\/p>\n<p>Ap\u00f3s fazemos o envio da imagem, e j\u00e1 conseguimos achar as coordenadas, veja abaixo:<\/p>\n<p id=\"GrDqvSr\"><img decoding=\"async\" loading=\"lazy\" width=\"932\" height=\"397\" class=\"alignnone size-full wp-image-797 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps.jpg\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps.jpg 932w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-300x128.jpg 300w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-768x327.jpg 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ent\u00e3o vamos aplicar no c\u00f3digo.<\/p>\n<p><em><span style=\"color: #ff0000;\">Tive que fazer alguns ajustes, n\u00e3o est\u00e1 conforme a imagem acima o css, confira abaixo.<\/span><\/em><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt; \r\nbody {\r\n  background: #24aecd;\r\n}\r\n\r\n\r\n.personagem2 {\r\n  width: 626px;\r\n  height: 80px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')-0px -91px;\r\n  animation: play2 2s steps(10) infinite;\r\n}\r\n\r\n@keyframes play2 {\r\n    100% { background-position-x: -626px; }\r\n}\r\n&lt;\/style&gt; \r\n&lt;center&gt;\r\nExemplo 3 s\u00f3 uma parte da anima\u00e7\u00e3o.\r\n&lt;div class=\"personagem2\"&gt;&lt;\/div&gt;\r\n&lt;\/center&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>Vamos pegar s\u00f3 uma parte da anima\u00e7\u00e3o.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt; \r\nbody {\r\n  background: #24aecd;\r\n}\r\n\r\n.personagem3 {\r\n  width: 63px;\r\n  height: 80px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')40px -91px;\r\n  animation: play3 2s steps(10) infinite;\r\n}\r\n\r\n@keyframes play3 {\r\n    100% { background-position-x: -626px; }\r\n}\r\n&lt;\/style&gt; \r\n&lt;center&gt;\r\nExemplo s\u00f3 uma parte da anima\u00e7\u00e3o\r\n&lt;div class=\"personagem3\"&gt;&lt;\/div&gt;\r\n&lt;\/center&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<p><strong>Veja todos os exemplos aqui:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt; \r\nbody {\r\n  background: #24aecd;\r\n}\r\n\r\n.personagem {\r\n  width: 626px;\r\n  height: 369px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;\r\n  animation: play .8s steps(10) infinite;\r\n}\r\n\r\n@keyframes play {\r\n    100% { background-position: -626px; }\r\n}\r\n\r\n.personagem1 {\r\n  width: 626px;\r\n  height: 369px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;\r\n  animation: play1 2s steps(10) infinite;\r\n}\r\n\r\n@keyframes play1 {\r\n    100% { background-position: -626px; }\r\n}\r\n\r\n.personagem2 {\r\n  width: 626px;\r\n  height: 80px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')-0px -91px;\r\n  animation: play2 2s steps(10) infinite;\r\n}\r\n\r\n@keyframes play2 {\r\n    100% { background-position-x: -626px; }\r\n}\r\n\r\n\r\n.personagem3 {\r\n  width: 63px;\r\n  height: 80px;\r\n  margin: 2% auto;\r\n  background: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')40px -91px;\r\n  animation: play2 2s steps(10) infinite;\r\n}\r\n\r\n@keyframes play3 {\r\n    100% { background-position-x: -626px; }\r\n}\r\n&lt;\/style&gt; \r\n&lt;center&gt;\r\nExemplo .8s\r\n&lt;div class=\"personagem\"&gt;&lt;\/div&gt;\r\n\r\nExemplo 2s\r\n&lt;div class=\"personagem1\"&gt;&lt;\/div&gt;\r\n\r\n\r\nExemplo 3 s\u00f3 uma parte da anima\u00e7\u00e3o\r\n&lt;div class=\"personagem2\"&gt;&lt;\/div&gt;\r\n\r\nExemplo 4 s\u00f3 uma parte da anima\u00e7\u00e3o\r\n&lt;div class=\"personagem3\"&gt;&lt;\/div&gt;\r\n&lt;\/center&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<p>Para quem quiser ver mais a fundo anima\u00e7\u00f5es CSS, olhe esse <a href=\"https:\/\/www.emezeta.com\/articulos\/animar-personajes-con-animaciones-css\" target=\"_blank\" rel=\"noopener noreferrer\">site<\/a> que tem bons exemplos.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" data-height=\"380\" data-theme-id=\"0\" data-slug-hash=\"ByEyda\" data-default-tab=\"result\" data-user=\"manz\" data-embed-version=\"2\">Ver el ejemplo <a href=\"https:\/\/codepen.io\/manz\/pen\/ByEyda\/\">Bernard (The Day of the Tentacle) CSS animation<\/a> por Manz (<a href=\"https:\/\/codepen.io\/manz\">@manz<\/a>) en <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<div id=\"divcode\" style=\"display:none;z-index:200000001;padding:10px;border-radius:10px;background-color: #0054A1; position:fixed;top:100px;left: 50%;transform: translate(-50%, 0);\">\n  <font color=#fff>Ap\u00f3s clicar em Copy &#8663;<br>O c&oacute;digo fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n  <form name=\"codigo\" id=\"codigo\"  method=\"post\" action=\"https:\/\/www.joemaster.com.br\/codigos\/gerar_codigo.php\" target=\"_blank\"><textarea name=\"testarcodigo\" id=\"testarcodigo\"  cols=\"30\" rows=\"30\" wrap=\"VIRTUAL\"><\/textarea><\/form><input type=\"button\" name=\"Submit\" value=\"Testar\" onClick=\"if(document.getElementById('testarcodigo').value ==''){alert('Copie o c\u00f3digo conforme descrito acima!');}else{document.getElementById('codigo').submit();setTimeout(function(){document.getElementById('testarcodigo').value='';document.getElementById('divcode').style.display='none'; }, 1000);}\" style=\"background-color:#FFCC05;border-radius:15px;padding:5px;width:100px;color:#000;\">\n  <input type=\"button\" name=\"Submit\" value=\"Fechar\" onClick=\"document.getElementById('testarcodigo').value='';document.getElementById('divcode').style.display='none';\" style=\"background-color:#FFCC05;border-radius:15px;padding:5px;width:100px;color:#000;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Existe uma fun\u00e7\u00e3o\u00a0 pouco conhecida nas anima\u00e7\u00f5es CSS que permite dividir uma anima\u00e7\u00e3o em segmentos &#8211; ou etapas &#8211; em vez de execut\u00e1-la como uma anima\u00e7\u00e3o cont\u00ednua do in\u00edcio ao fim. Essa fun\u00e7\u00e3o \u00e9 \u00fatil para criar anima\u00e7\u00f5es de folhas de sprite, e exibir com precis\u00e3o cada imagem de sprite como um quadro, sem efeitos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25],"tags":[136,10,138,139,137],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps() - JoeMaster<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps() - JoeMaster\" \/>\n<meta property=\"og:description\" content=\"Existe uma fun\u00e7\u00e3o\u00a0 pouco conhecida nas anima\u00e7\u00f5es CSS que permite dividir uma anima\u00e7\u00e3o em segmentos &#8211; ou etapas &#8211; em vez de execut\u00e1-la como uma anima\u00e7\u00e3o cont\u00ednua do in\u00edcio ao fim. Essa fun\u00e7\u00e3o \u00e9 \u00fatil para criar anima\u00e7\u00f5es de folhas de sprite, e exibir com precis\u00e3o cada imagem de sprite como um quadro, sem efeitos [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/\" \/>\n<meta property=\"og:site_name\" content=\"JoeMaster\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-09T15:30:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-09T11:21:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"626\" \/>\n\t<meta property=\"og:image:height\" content=\"369\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"joemaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"joemaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/\"},\"author\":{\"name\":\"joemaster\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"headline\":\"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps()\",\"datePublished\":\"2020-07-09T15:30:50+00:00\",\"dateModified\":\"2022-12-09T11:21:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/\"},\"wordCount\":551,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"keywords\":[\"anima\u00e7\u00e3o\",\"css\",\"elementos\",\"keyframes\",\"steps\"],\"articleSection\":[\"css\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/\",\"name\":\"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps() - JoeMaster\",\"isPartOf\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#website\"},\"datePublished\":\"2020-07-09T15:30:50+00:00\",\"dateModified\":\"2022-12-09T11:21:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.joemaster.com.br\/tutoriais\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps()\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#website\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/\",\"name\":\"JoeMaster\",\"description\":\"Tutoriais de WEB e APLICATIVOS EM HTML5, PHP, JS, CSS\",\"publisher\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.joemaster.com.br\/tutoriais\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\",\"name\":\"joemaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg\",\"contentUrl\":\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg\",\"width\":1461,\"height\":281,\"caption\":\"joemaster\"},\"logo\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/joemaster.com.br\/tutoriais\"],\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/author\/joemaster\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps() - JoeMaster","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/","og_locale":"pt_BR","og_type":"article","og_title":"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps() - JoeMaster","og_description":"Existe uma fun\u00e7\u00e3o\u00a0 pouco conhecida nas anima\u00e7\u00f5es CSS que permite dividir uma anima\u00e7\u00e3o em segmentos &#8211; ou etapas &#8211; em vez de execut\u00e1-la como uma anima\u00e7\u00e3o cont\u00ednua do in\u00edcio ao fim. Essa fun\u00e7\u00e3o \u00e9 \u00fatil para criar anima\u00e7\u00f5es de folhas de sprite, e exibir com precis\u00e3o cada imagem de sprite como um quadro, sem efeitos [&hellip;]","og_url":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/","og_site_name":"JoeMaster","article_published_time":"2020-07-09T15:30:50+00:00","article_modified_time":"2022-12-09T11:21:58+00:00","og_image":[{"width":626,"height":369,"url":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg","type":"image\/jpeg"}],"author":"joemaster","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"joemaster","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#article","isPartOf":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/"},"author":{"name":"joemaster","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"headline":"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps()","datePublished":"2020-07-09T15:30:50+00:00","dateModified":"2022-12-09T11:21:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/"},"wordCount":551,"commentCount":0,"publisher":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"keywords":["anima\u00e7\u00e3o","css","elementos","keyframes","steps"],"articleSection":["css"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/","url":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/","name":"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps() - JoeMaster","isPartOf":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#website"},"datePublished":"2020-07-09T15:30:50+00:00","dateModified":"2022-12-09T11:21:58+00:00","breadcrumb":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/criando-uma-animacoes-em-css-sprite-sheet-com-steps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.joemaster.com.br\/tutoriais\/"},{"@type":"ListItem","position":2,"name":"Criando uma Anima\u00e7\u00f5es em CSS Sprite Sheet com steps()"}]},{"@type":"WebSite","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#website","url":"https:\/\/www.joemaster.com.br\/tutoriais\/","name":"JoeMaster","description":"Tutoriais de WEB e APLICATIVOS EM HTML5, PHP, JS, CSS","publisher":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.joemaster.com.br\/tutoriais\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d","name":"joemaster","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/","url":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg","contentUrl":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg","width":1461,"height":281,"caption":"joemaster"},"logo":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/joemaster.com.br\/tutoriais"],"url":"https:\/\/www.joemaster.com.br\/tutoriais\/author\/joemaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/790"}],"collection":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=790"}],"version-history":[{"count":10,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/790\/revisions"}],"predecessor-version":[{"id":808,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/790\/revisions\/808"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/791"}],"wp:attachment":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}