{"id":216,"date":"2016-07-25T15:02:41","date_gmt":"2016-07-25T18:02:41","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=216"},"modified":"2017-01-29T15:42:09","modified_gmt":"2017-01-29T17:42:09","slug":"css-keyframes","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/css-keyframes\/","title":{"rendered":"CSS @keyframes"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/07\/keyframes.png\" alt=\"CSS @keyframes\" \/>\n<p>A regra @keyframes vai definir as etapas da sua anima\u00e7\u00e3o. Com ela voc\u00ea vai informar o in\u00edcio e o final do valor da propriedade CSS que voc\u00ea deseja animar.<\/p>\n<p>Vale lembrar a anima\u00e7\u00e3o acontece na transi\u00e7\u00e3o de um valor para o outro. Exemplo, na transi\u00e7\u00e3o de 100px de width para 200px de width. Ou na transi\u00e7\u00e3o do red para o blue (no caso de cores).<\/p>\n<p>N\u00e3o tem mist\u00e9rio para declararmos ela. Basta nomear a sua anima\u00e7\u00e3o e definir as etapas da mesma.<\/p>\n<pre><code class=\"language-css\">\n@keyframes estica {\n 0% {\n   width: 100px;\n }\n 100% {\n   width: 200px;\n }\n}\n<\/code><\/pre>\n<p>Voc\u00ea pode definir as etapas de duas formas. A mais comum \u00e9 atrav\u00e9s de porcentagens, j\u00e1 que te d\u00e1 maior controle entre as etapas. Ent\u00e3o o que voc\u00ea definir dentro de 0% {}, far\u00e1 parte do in\u00edcio da sua anima\u00e7\u00e3o.<\/p>\n<p>N\u00e3o existem limites de etapas. Voc\u00ea pode ter 0%, 20%, 32%, 100% e por ai vai. O ideal \u00e9 sempre ter a etapa 0% e a 100% na sua anima\u00e7\u00e3o.<\/p>\n<p>Outra forma de declarar \u00e9 atrav\u00e9s do from e to. O from \u00e9 a mesma coisa que 0% e o to a mesma coisa que 100%. Por isso acredito que declarar logo em porcentagens facilita o trabalho.<\/p>\n<p>As vezes durante as etapas de uma anima\u00e7\u00e3o, voc\u00ea deseja voltar a um mesmo estado que j\u00e1 aconteceu durante ela. Exemplo:<\/p>\n<p>Imagina que voc\u00ea deseja que a div v\u00e1 de: vermelho > amarelo > verde > amarelo > vermelho<\/p>\n<p>As cores vermelho e amarelo aparecem duas vezes, ent\u00e3o voc\u00ea pensaria em escrever o c\u00f3digo assim (vou dividir 100% em 5 vezes, j\u00e1 que possu\u00edmos 5 etapas):<\/p>\n<pre><code class=\"language-css\">\n@keyframes sinal {\n 0% {\n   background: red;\n }\n 25% {\n   background: yellow;\n }\n 50% {\n   background: green;\n }\n 75% {\n   background: yellow;\n }\n 100% {\n   background: red;\n }\n}\n<\/code><\/pre>\n<p>A forma acima est\u00e1 correta, mas voc\u00ea pode otimizar este c\u00f3digo. Evitar repeti\u00e7\u00f5es \u00e9 uma das principais regras da codifica\u00e7\u00e3o. Ent\u00e3o voc\u00ea pode escrever assim:<\/p>\n<pre><code class=\"language-css\">\n@keyframes sinal {\n 0%, 100% {\n   background: red;\n }\n 25%, 75% {\n   background: yellow;\n }\n 50% {\n   background: green;\n }\n}\n<\/code><\/pre>\n<p>Basta adicionar uma v\u00edrgula e colocar o momento da pr\u00f3xima etapa. Voc\u00ea pode colocar quantas quiser em uma mesma linha.<\/p>\n<p>D\u00ea uma olhada no exemplo dos planetas animados com CSS abaixo:<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"aNKzGe\" 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\/aNKzGe\/\">planets-perfect<\/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>Uma dica para voc\u00ea se dar bem com as anima\u00e7\u00f5es com CSS, \u00e9 aprender a utilizar bem a propriedade transform. Essa propriedade \u00e9 a indicada para animarmos o posicionamento dos elementos (por exemplo, fazer uma div rodar como um planeta).<\/p>\n<p>O fato \u00e9 que anima\u00e7\u00e3o de transform s\u00e3o mais leves para o browser. Eu ainda vou fazer uma postagem falando mais sobre o transform. Agora vamos fazer um simples exemplo.<\/p>\n<p>Para fazer um elemento girar em torno de um eixo \u00e9 necess\u00e1rio animar o transform: rotate() translateY();<\/p>\n<p>O c\u00edrculo pode ser feito facilmente com:<\/p>\n<pre><code class=\"language-css\">\n.circle {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: DodgerBlue;\n  margin: 60px auto;\n}\n<\/code><\/pre>\n<p>Para animarmos precisamos primeiro definir os @keyframes. Eu quero rode 360 graus, ent\u00e3o para isso eu devo ir de: transform: rotate(0deg); para transform: rotate(360deg);<\/p>\n<p>O problema \u00e9 que se adicionarmos apenas o rotate, o c\u00edrculo ir\u00e1 girar em cima de seu pr\u00f3prio eixo. E como ele possui uma cor flat azul, voc\u00ea n\u00e3o ser\u00e1 capaz de ver ele rodando.<\/p>\n<p>Mas ai basta movermos um pouco o eixo Y dele (ou seja, colocar ele um pouco para cima). O seu eixo inicial continuar\u00e1 no mesmo ponto de partida, mas agora ele vai passar a rodar em volta dele e n\u00e3o em cima dele. Vai ficar assim:<\/p>\n<pre><code class=\"language-css\">\n@keyframes circle {\n  0% {\n    transform: rotate(0deg) translateX(25px);\n  }\n  100% {\n    transform: rotate(360deg) translateX(25px);\n  }\n}\n<\/code><\/pre>\n<p>Por \u00faltimo temos que adicionar a propriedade animation ao c\u00edrculo (ainda vamos falar dela nas pr\u00f3ximas aulas.) E assim fica ele ao final:<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"AXaJmd\" 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\/AXaJmd\/\">circle<\/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>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>A regra @keyframes vai definir as etapas da sua anima\u00e7\u00e3o. Com ela voc\u00ea vai informar o in\u00edcio e o final do valor da propriedade CSS que voc\u00ea deseja animar. Vale lembrar a anima\u00e7\u00e3o acontece na transi\u00e7\u00e3o de um valor para o outro. Exemplo, na transi\u00e7\u00e3o de 100px de width para 200px de width. Ou na [&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\/216"}],"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=216"}],"version-history":[{"count":6,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/216\/revisions\/444"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}