{"id":260,"date":"2016-09-05T06:57:45","date_gmt":"2016-09-05T09:57:45","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=260"},"modified":"2017-01-29T15:42:41","modified_gmt":"2017-01-29T17:42:41","slug":"animation-iteration-count","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/animation-iteration-count\/","title":{"rendered":"Animation Iteration Count e Direction"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/09\/animation-iteration-count.png\" alt=\"animation-iteration-count\" \/>\n<p>Com a propriedade animation-iteration-count voc\u00ea define quantas vezes essa anima\u00e7\u00e3o ser\u00e1 repetida.<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"WGbrQd\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/WGbrQd\/\">animation-loading<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Voc\u00ea pode colocar um n\u00famero qualquer ou a palavra-chave infinite. Com o infinite a anima\u00e7\u00e3o ser\u00e1 repetida infinitamente. Este valor ser\u00e1 bem vindo quando estivermos criando uma anima\u00e7\u00e3o de loading como no exemplo acima.<\/p>\n<p>Sem mist\u00e9rio, ou voc\u00ea define um n\u00famero ou se ela ser\u00e1 infinita.<\/p>\n<p>Outra propriedade de anima\u00e7\u00e3o \u00e9 a animation-direction. Ela \u00e9 respons\u00e1vel por definir qual a dire\u00e7\u00e3o em que a anima\u00e7\u00e3o vai ocorrer.<\/p>\n<p>Os seguintes valores s\u00e3o poss\u00edveis com ela:<\/p>\n<ul>\n<li>normal<\/li>\n<li>reverse<\/li>\n<li>alternate<\/li>\n<li>alternate-reverse<\/li>\n<\/ul>\n<p>O normal \u00e9 o valor padr\u00e3o. No exemplo do loading acima, ficaria bem ruim apenas com o normal, pois a anima\u00e7\u00e3o iria ocorrer com as bolinhas caindo, por\u00e9m ao final elas resetariam para a posi\u00e7\u00e3o inicial.<\/p>\n<p>O reverse muda a ordem da sua anima\u00e7\u00e3o. Ent\u00e3o se voc\u00ea est\u00e1 animando de 100px para 0px, ele passa a animar de 0px para 100px, sem a necessidade de voc\u00ea alterar os @keyframes.<\/p>\n<p>Para anima\u00e7\u00f5es infinitas, geralmente o alternate \u00e9 a melhor op\u00e7\u00e3o. Com ele a anima\u00e7\u00e3o vai e volta. O que isso significa, que a primeira anima\u00e7\u00e3o ser\u00e1 normal, a segunda reverse e assim por diante. Criando uma ilus\u00e3o de vai e volta.<\/p>\n<p>O alternate-reverse funciona da mesma maneira que o alternate, por\u00e9m ele come\u00e7a pela posi\u00e7\u00e3o contr\u00e1ria da anima\u00e7\u00e3o definida nos @keyframes.<\/p>\n<p>Todas as postagens sobre anima\u00e7\u00f5es com CSS:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.origamid.com\/codex\/mini-curso-de-css-animation\/\">Mini Curso de CSS3 Animation<\/a><\/li>\n<li><a href=\"https:\/\/www.origamid.com\/codex\/css-keyframes\/\">CSS @keyframes<\/a><\/li>\n<li><a href=\"https:\/\/www.origamid.com\/codex\/css-animation\/\">CSS Animation<\/a><\/li>\n<li><a href=\"https:\/\/www.origamid.com\/codex\/animation-timing-function\/\">Animation Timing Function<\/a><\/li>\n<li><a href=\"https:\/\/www.origamid.com\/codex\/animation-delay\/\">Animation Delay<\/a><\/li>\n<li><a href=\"https:\/\/www.origamid.com\/codex\/animation-iteration-count\/\">Animation Iteration Count e Direction<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Com a propriedade animation-iteration-count voc\u00ea define quantas vezes essa anima\u00e7\u00e3o ser\u00e1 repetida. See the Pen animation-loading by Andr\u00e9 | Origamid (@origamid) on CodePen. Voc\u00ea pode colocar um n\u00famero qualquer ou a palavra-chave infinite. Com o infinite a anima\u00e7\u00e3o ser\u00e1 repetida infinitamente. Este valor ser\u00e1 bem vindo quando estivermos criando uma anima\u00e7\u00e3o de loading como no [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/260"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=260"}],"version-history":[{"count":6,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"predecessor-version":[{"id":448,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/260\/revisions\/448"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}