{"id":248,"date":"2016-08-25T12:15:02","date_gmt":"2016-08-25T15:15:02","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=248"},"modified":"2017-01-29T15:42:33","modified_gmt":"2017-01-29T17:42:33","slug":"animation-delay","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/animation-delay\/","title":{"rendered":"Animation Delay"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/08\/animation-delay.png\" alt=\"animation-delay\" \/>\n<p>Com o animation-delay voc\u00ea pode indicar que a anima\u00e7\u00e3o s\u00f3 dever\u00e1 come\u00e7ar ap\u00f3s tantos segundos. O uso dela \u00e9 essencial quando possu\u00edmos uma sequ\u00eancia de itens que ser\u00e3o animados na p\u00e1gina.<\/p>\n<p>Animar um elemento de cada vez \u00e9 mais uma forma de deixar ela mais parecida com o mundo real. Por exemplo, quando voc\u00ea est\u00e1 correndo e para, cada parte do seu corpo para em um tempo espec\u00edfico, desde o seu cabelo aos seus bra\u00e7os.<\/p>\n<p>No exemplo abaixo, al\u00e9m do cubic-bezier, o animation-delay tamb\u00e9m foi respons\u00e1vel por deixar a anima\u00e7\u00e3o mais realista.<\/p>\n<p data-height=\"470\" data-theme-id=\"24256\" data-slug-hash=\"BzGExp\" data-default-tab=\"result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/BzGExp\/\">animation-timing-function<\/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>Veja agora um exemplo que anima todos os itens de uma \u00fanica vez.<\/p>\n<p data-height=\"470\" data-theme-id=\"24256\" data-slug-hash=\"YWoLLx\" data-default-tab=\"result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/YWoLLx\/\">animation-sem-delay<\/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>A declara\u00e7\u00e3o do animation-delay \u00e9 bem simples, basta indicar quantos segundos voc\u00ea deseja que ele espere antes de disparar a anima\u00e7\u00e3o.<\/p>\n<pre><code class=\"language-css\">\n.modal {\n    animation-delay: .3s;\n}\n<\/code><\/pre>\n<p>Vale lembrar que caso voc\u00ea esteja utilizando apenas a propriedade animation, o delay deve vir logo ap\u00f3s a fun\u00e7\u00e3o de timing. No caso abaixo o delay \u00e9 de .3s<\/p>\n<pre><code class=\"language-css\">\n.modal {\n    animation: slide 1s ease .3s;\n}\n<\/code><\/pre>\n<p>Cada anima\u00e7\u00e3o vai demandar um delay diferente, ent\u00e3o n\u00e3o tem como eu te passar uma f\u00f3rmula de quantos segundos \u00e9 o ideal. A dica \u00e9 nunca criar um delay que seja maior que a anima\u00e7\u00e3o anterior. Ou seja, voc\u00ea quer que o item comece a animar antes que o item anterior pare de animar.<\/p>\n<p>No exemplo dos modais, eu comecei adicionando 0.15s ao H1 que \u00e9 o segundo elemento animado ap\u00f3s o surgimento do modal. Depois eu fui incrementando os outros elementos (o p e o bot\u00e3o) com apenas 0.05s. Algo bem sutil, mas que faz toda a diferen\u00e7a.<\/p>\n<p>\u00cdcone: Wait by Gregor \u010cre\u0161nar from the Noun Project<\/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 o animation-delay voc\u00ea pode indicar que a anima\u00e7\u00e3o s\u00f3 dever\u00e1 come\u00e7ar ap\u00f3s tantos segundos. O uso dela \u00e9 essencial quando possu\u00edmos uma sequ\u00eancia de itens que ser\u00e3o animados na p\u00e1gina. Animar um elemento de cada vez \u00e9 mais uma forma de deixar ela mais parecida com o mundo real. Por exemplo, quando voc\u00ea est\u00e1 [&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\/248"}],"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=248"}],"version-history":[{"count":8,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/248\/revisions"}],"predecessor-version":[{"id":447,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/248\/revisions\/447"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}