{"id":208,"date":"2016-07-21T18:54:13","date_gmt":"2016-07-21T21:54:13","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=208"},"modified":"2017-01-29T15:41:33","modified_gmt":"2017-01-29T17:41:33","slug":"mini-curso-de-css-animation","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/mini-curso-de-css-animation\/","title":{"rendered":"Mini Curso de CSS3 Animation"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/07\/animation.png\" alt=\"Mini Curso de CSS Animation\" \/>\n<p>Uma das principais revolu\u00e7\u00f5es do CSS3 certamente s\u00e3o as anima\u00e7\u00f5es. D\u00ea uma olhada em uma simples anima\u00e7\u00e3o abaixo (n\u00e3o recomendo cegar os seus usu\u00e1rio com esse tipo de anima\u00e7\u00e3o, rsrsrs.)<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"KroxwP\" 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\/KroxwP\/\">KroxwP<\/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>O que antes s\u00f3 era poss\u00edvel ser feito com JavaScript, agora voc\u00ea consegue facilmente fazer com CSS exigindo menos do seu browser.<\/p>\n<p>N\u00e3o se engane, at\u00e9 as anima\u00e7\u00f5es com JavaScript eram \/ s\u00e3o feitas manipulando o CSS. Por exemplo, se voc\u00ea quisesse que um item fosse de top: 0px; para top: 50px;, voc\u00ea iria adicionar 1px ao top a cada milissegundo (ou algo do tipo).<\/p>\n<p>Com o CSS Animation, surgiu a nova regra @keyframes. E agora voc\u00ea pode animar assim:<\/p>\n<pre><code class=\"language-css\">\n@keyframes nomeAnimacao {\n 0% {\n   top: 0px;\n }\n 100% {\n   top: 50px;\n }\n}\n\n.animar {\n animation: nomeAnimacao 1s;\n}\n<\/code><\/pre>\n<p>Com @keyframes voc\u00ea define o inicio e fim (meio tamb\u00e9m) da anima\u00e7\u00e3o. \u00c9 poss\u00edvel adicionar quantos keyframes voc\u00ea quiser. Cada keyframe possui o momento em que ele deve come\u00e7ar (ex: 50%).<\/p>\n<p>Seguido pelas propriedades que voc\u00ea deseja naquele momento (ex: 50% { top: 50px; }). Voc\u00ea pode utilizar quantas propriedades quiser tamb\u00e9m.<\/p>\n<p>Lembrando que existem propriedades e valores que n\u00e3o s\u00e3o poss\u00edveis ser animados. Como os gradientes por exemplo, mas vamos falar disso mais tarde.<\/p>\n<p>\u00c9 necess\u00e1rio nomear a sua anima\u00e7\u00e3o, para isso basta adicionar um nome \u00fanico antes da primeira abertura das chaves.<\/p>\n<p>N\u00e3o s\u00e3o apenas os keyframes que um item precisa para ser animado. \u00c9 necess\u00e1rio tamb\u00e9m definir algumas das propriedades de animation como:<\/p>\n<ul>\n<li>animation-name<\/li>\n<li>animation-duration<\/li>\n<li>animation-timing-function<\/li>\n<li>animation-delay<\/li>\n<li>animation-iteration-count<\/li>\n<li>animation-direction<\/li>\n<li>animation-fill-mode<\/li>\n<li>animation-play-state<\/li>\n<\/ul>\n<p>Usando apenas o nome animation \u00e9 poss\u00edvel declarar os valores de cada uma delas, ele \u00e9 apenas um corta caminho para declarar os valores das propriedades acima (como margin \u00e9 um corta caminho para margin-top, margin-bottom e etc).<\/p>\n<p>O mini curso ser\u00e1 feito em postagens aqui no Codex e no Facebook. O link de todas elas ser\u00e3o encontrados aqui mesmo (ao final do curso). Caso n\u00e3o queira perder nenhuma postagem e discutir cada uma delas em tempo real, assine o <a href=\"https:\/\/www.facebook.com\/origamid\/\" target=\"_blank\">feed de not\u00edcias da p\u00e1gina no Facebook<\/a>.<\/p>\n<p>Durante ele vamos explorar as propriedades que s\u00e3o poss\u00edveis serem animadas, assim como todas as propriedades do animation e como utilizar elas. Eu vou explicar melhor o funcionamento dos @keyframes tamb\u00e9m.<\/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>Uma das principais revolu\u00e7\u00f5es do CSS3 certamente s\u00e3o as anima\u00e7\u00f5es. D\u00ea uma olhada em uma simples anima\u00e7\u00e3o abaixo (n\u00e3o recomendo cegar os seus usu\u00e1rio com esse tipo de anima\u00e7\u00e3o, rsrsrs.) See the Pen KroxwP by Andr\u00e9 | Origamid (@origamid) on CodePen. O que antes s\u00f3 era poss\u00edvel ser feito com JavaScript, agora voc\u00ea consegue facilmente [&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\/208"}],"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=208"}],"version-history":[{"count":7,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/208\/revisions\/443"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}