{"id":237,"date":"2016-08-09T20:38:03","date_gmt":"2016-08-09T23:38:03","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=237"},"modified":"2017-01-29T15:42:24","modified_gmt":"2017-01-29T17:42:24","slug":"animation-timing-function","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/animation-timing-function\/","title":{"rendered":"Animation Timing Function"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/08\/animation-timing.png\" alt=\"animation-timing\" \/>\n<p>E com o <a href=\"https:\/\/www.origamid.com\/codex\/css-animation\/\">animation-duration<\/a> que voc\u00ea define em quanto tempo a anima\u00e7\u00e3o ir\u00e1 ocorrer, mas \u00e9 com o animation-timing-function que voc\u00ea consegue dar vida e deixar mais org\u00e2nica (parecida com o mundo real) essa anima\u00e7\u00e3o.<\/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>Essa propriedade \u00e9 respons\u00e1vel por controlar a velocidade em que a anima\u00e7\u00e3o ir\u00e1 ocorrer, no espa\u00e7o de tempo definido pelo duration. Se voc\u00ea animar um carro acelerando, por exemplo, ele sempre ir\u00e1 come\u00e7ar devagar e aumentar a sua velocidade com o tempo.<\/p>\n<p>Para influenciarmos na velocidade, a propriedade possui algumas palavras-chave j\u00e1 com velocidades mais comuns pr\u00e9-definidas. S\u00e3o elas:<\/p>\n<ul>\n<li>ease<\/li>\n<li>ease-in<\/li>\n<li>ease-out<\/li>\n<li>ease-in-out<\/li>\n<li>linear<\/li>\n<li>step-start<\/li>\n<li>step-end<\/li>\n<\/ul>\n<p>Veja o exemplo abaixo de cada uma delas funcionando:<\/p>\n<p data-height=\"360\" data-theme-id=\"24256\" data-slug-hash=\"XKQJxa\" 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\/XKQJxa\/\">Animation Timing Function &#8211; Keywords<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<ul>\n<li>ease (come\u00e7a e termina devagar, meio r\u00e1pido)<\/li>\n<li>ease-in (come\u00e7a devagar)<\/li>\n<li>ease-out (termina devagar)<\/li>\n<li>ease-in-out (come\u00e7a e termina devagar)<\/li>\n<li>linear (mant\u00e9m a mesma velocidade)<\/li>\n<li>step-start (fica na posi\u00e7\u00e3o inicial da anima\u00e7\u00e3o)<\/li>\n<li>step-end (fica na posi\u00e7\u00e3o final da anima\u00e7\u00e3o)<\/li>\n<\/ul>\n<p>Por\u00e9m o valor mais interessante \u00e9 o cubic-bezier, com ele voc\u00ea consegue ter controle total sobre a curva de B\u00e9zier que \u00e9 respons\u00e1vel por controlar a velocidade da anima\u00e7\u00e3o.<\/p>\n<p>Aqui voc\u00ea consegue ver mais sobre a curva e manipular os seus pontos para testar: <a href=\"http:\/\/cubic-bezier.com\/\">http:\/\/cubic-bezier.com\/<\/a> Esse \u00e9 um projeto da Lea Verou<\/p>\n<p>No primeiro exemplo dessa postagem eu usei cubic-bezier(.3,1,.3,1.3), o fato do \u00faltimo valor ser acima de 1 (no caso, 1.3), faz com que a anima\u00e7\u00e3o passe um pouco do ponto final e depois retorne. Como uma bola quicando que amassa e depois retorna ao seu formato original. Isso deixa a anima\u00e7\u00e3o mais org\u00e2nica, pois imita o mundo real.<\/p>\n<p data-height=\"472\" data-theme-id=\"24256\" data-slug-hash=\"mEQNvE\" 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\/mEQNvE\/\">animation-timing-function-teste<\/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>Acima temos um exemplo utilizando diferentes timing. Voc\u00ea pode observar que a cubic-bezier cria uma anima\u00e7\u00e3o mais satisfat\u00f3ria do que as demais.<\/p>\n<p>Stopwatch by Icon Fair 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>E com o animation-duration que voc\u00ea define em quanto tempo a anima\u00e7\u00e3o ir\u00e1 ocorrer, mas \u00e9 com o animation-timing-function que voc\u00ea consegue dar vida e deixar mais org\u00e2nica (parecida com o mundo real) essa anima\u00e7\u00e3o. See the Pen animation-timing-function by Andr\u00e9 | Origamid (@origamid) on CodePen. Essa propriedade \u00e9 respons\u00e1vel por controlar a velocidade em [&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\/237"}],"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=237"}],"version-history":[{"count":9,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":446,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/237\/revisions\/446"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}