{"id":52127,"date":"2023-04-24T07:00:33","date_gmt":"2023-04-24T14:00:33","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52127"},"modified":"2025-05-26T12:57:18","modified_gmt":"2025-05-26T19:57:18","slug":"animacao-css","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/","title":{"rendered":"Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es"},"content":{"rendered":"\n<p> Anima\u00e7\u00f5es cativantes que prendem seu olhar enquanto uma p\u00e1gina \u00e9 carregada. Transi\u00e7\u00f5es suaves que o guiam sem esfor\u00e7o pelo conte\u00fado de um site. Explos\u00f5es inesperadas de cor e movimento \u00e0 medida que voc\u00ea interage com bot\u00f5es em um aplicativo.<\/p>\n\n\n\n<p>Embora sutis, esses elementos influenciam bastante a sua percep\u00e7\u00e3o de uma marca e sua experi\u00eancia digital geral. Ent\u00e3o, o que traz esses detalhes envolventes \u00e0 vida? Muitas vezes, isso \u00e9 alcan\u00e7ado com a ajuda de anima\u00e7\u00f5es CSS.<\/p>\n\n\n\n<p>Neste guia, vamos ajud\u00e1-lo a chegar l\u00e1 com:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uma introdu\u00e7\u00e3o ao CSS e anima\u00e7\u00e3o CSS<\/li>\n\n\n\n<li>Principais raz\u00f5es para voc\u00ea experimentar anima\u00e7\u00f5es CSS<\/li>\n\n\n\n<li>Os poucos obst\u00e1culos para adotar anima\u00e7\u00f5es CSS (com solu\u00e7\u00f5es)<\/li>\n\n\n\n<li>17 anima\u00e7\u00f5es CSS exemplares para usar em seu app ou site<\/li>\n\n\n\n<li>Como come\u00e7ar a adicionar CSS ao seu site<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"h-meet-css\" class=\"wp-block-heading\">Conhe\u00e7a o CSS<\/h2>\n\n\n\n<p>CSS \u00e9 a sigla para Folhas de Estilo em Cascata.<\/p>\n\n\n\n<p>CSS \u00e9 uma linguagem de c\u00f3digo que dita como elementos gr\u00e1ficos e de conte\u00fado em um site ou aplicativo parecem e agem. CSS \u00e9 \u00fatil para personalizar cores e fontes, posicionar e espa\u00e7ar elementos em uma p\u00e1gina, e claro, criar anima\u00e7\u00f5es. Existem anima\u00e7\u00f5es em CSS \u201cpuro\u201d constru\u00eddas apenas a partir de HTML (Linguagem de Marca\u00e7\u00e3o de Hipertexto) e c\u00f3digo CSS, e h\u00e1 anima\u00e7\u00f5es CSS que incorporam outros tipos de c\u00f3digo (como JavaScript) ou m\u00eddia existente (como GIFs).<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CSS<\/h3>\n    <p>Cascading Style Sheets (CSS) \u00e9 uma linguagem de codifica\u00e7\u00e3o essencial usada para estilizar p\u00e1ginas da web. O CSS ajuda a criar p\u00e1ginas bonitas modificando a apar\u00eancia de v\u00e1rios elementos, incluindo estilo de fonte, cor, layout e mais.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>O CSS surgiu no in\u00edcio dos anos 1990 e desde ent\u00e3o evoluiu do CSS1 para o CSS2 e para o CSS3 \u2014 a vers\u00e3o atual e amplamente utilizada. Neste artigo, seguiremos a pr\u00e1tica comum de usar o termo &#8220;CSS&#8221; ao nos referirmos a essa vers\u00e3o mais recente.<\/p>\n\n\n\n<p>HTML \u00e9 como a funda\u00e7\u00e3o e a estrutura de uma casa, sem a qual a casa n\u00e3o pode existir. Mas o CSS transforma essa casa com pintura, acabamentos e decora\u00e7\u00e3o que conferem estilos e funcionalidades \u00fanicos.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1600\" height=\"1245\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1.jpg\" alt=\"HTML vs CSS\" class=\"wp-image-40236 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-300x233.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1024x797.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-768x598.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1536x1195.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-600x467.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1200x934.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-730x568.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1460x1136.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-784x610.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1568x1220.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-877x682.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1245;\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-animation-building-blocks\">Blocos de Constru\u00e7\u00e3o de Anima\u00e7\u00e3o CSS<\/h3>\n\n\n\n<p>As anima\u00e7\u00f5es CSS utilizam c\u00f3digo CSS para concatenar v\u00e1rias propriedades e valores que fazem os elementos na tela &#8220;moverem-se&#8221;.<\/p>\n\n\n\n<p>As propriedades CSS s\u00e3o as pe\u00e7as das anima\u00e7\u00f5es, como fundo, raio da borda, fonte, margem, tipo de movimento (como girar ou desvanecer), etc. Os valores preenchem os detalhes em torno dessas propriedades de anima\u00e7\u00e3o, definindo cor, alinhamento, tamanho, dura\u00e7\u00e3o, dire\u00e7\u00e3o, velocidade, etc.<\/p>\n\n\n\n<p>Vamos analisar os elementos da popular regra <code>@keyframes<\/code>, que define transi\u00e7\u00f5es CSS ao longo de uma sequ\u00eancia de anima\u00e7\u00e3o, como exemplo de como propriedades e valores funcionam juntos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A propriedade <code>animation-name<\/code> d\u00e1 o nome da anima\u00e7\u00e3o.<\/li>\n\n\n\n<li>A propriedade <code>animation-duration<\/code> define a dura\u00e7\u00e3o de uma anima\u00e7\u00e3o. Os valores s\u00e3o normalmente exibidos em segundos (0s, 4s, etc.).<\/li>\n\n\n\n<li>A propriedade <code>animation-delay<\/code> especifica um in\u00edcio de anima\u00e7\u00e3o com atraso. Seu valor tamb\u00e9m \u00e9 dado em segundos (-2s, 5s, etc.).<\/li>\n\n\n\n<li>A propriedade <code>animation-iteration-count<\/code> indica o n\u00famero de vezes que uma anima\u00e7\u00e3o deve ser executada. O valor representa quantas vezes voc\u00ea deseja que a anima\u00e7\u00e3o se repita; por exemplo, <code>infinite-alternate<\/code> far\u00e1 com que continue indefinidamente.<\/li>\n\n\n\n<li>A propriedade <code>animation-direction<\/code> indica como uma anima\u00e7\u00e3o deve ser reproduzida. Os valores incluem <code>normal<\/code> (para frente), <code>reverse<\/code>, <code>alternate<\/code>, etc.<\/li>\n\n\n\n<li>A propriedade <code>animation-timing-function<\/code> define a curva de velocidade. Os valores incluem <code>ease-in-out<\/code> para um come\u00e7o e fim suaves, <code>cubic-bezier<\/code> para criar uma curva de apar\u00eancia complexa, etc.<\/li>\n\n\n\n<li>A propriedade <code>animation-fill-mode<\/code> define como um elemento parece quando a anima\u00e7\u00e3o n\u00e3o est\u00e1 sendo reproduzida. Os valores incluem <code>forwards<\/code> para reter os valores definidos pelo \u00faltimo quadro-chave, etc.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Agora para juntar tudo! Neste <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\" target=\"_blank\" rel=\"noopener\">exemplo da W3Schools<\/a>, que anexa uma anima\u00e7\u00e3o (chamada \u201cexample\u201d) ao elemento <code>&lt;div&gt;<\/code>, voc\u00ea pode ver que o elemento \u00e9 um quadrado de 100px e tem um fundo vermelho. Quando a anima\u00e7\u00e3o come\u00e7a, ela continuar\u00e1 por 4 segundos enquanto o fundo transita de vermelho para amarelo:<\/p>\n\n\n\n<p><code>\/* O c\u00f3digo de anima\u00e7\u00e3o *\/<br>\n@keyframes exemplo {<br>\nde {background-color: red;}<br>\npara {background-color: yellow;}<br>\n}<\/code><\/p>\n\n\n\n<p><code>\/* O elemento ao qual aplicar a anima\u00e7\u00e3o *\/<br>\ndiv {<br>\nwidth: 100px;<br>\nheight: 100px;<br>\nbackground-color: red;<br>\nanimation-name: example;<br>\nanimation-duration: 4s;<br>\n}<\/code><\/p>\n\n\n\n<p>(Nota: Este \u00e9 apenas um exemplo. Anima\u00e7\u00f5es de quadro-chave n\u00e3o s\u00e3o a \u00fanica maneira de criar anima\u00e7\u00f5es CSS, e elas n\u00e3o s\u00e3o compat\u00edveis com todas as vers\u00f5es de navegador \u2014 continue lendo para mais informa\u00e7\u00f5es e dicas sobre compatibilidade.)<\/p>\n\n\n\n<h2 id=\"h-3-awesome-reasons-to-implement-css-animations\" class=\"wp-block-heading\">3 Raz\u00f5es Incr\u00edveis para Implementar Anima\u00e7\u00f5es CSS<\/h2>\n\n\n\n<p>Desde impulsionar intera\u00e7\u00f5es inesquec\u00edveis at\u00e9 garantir que elas aconte\u00e7am na velocidade das expectativas modernas, as anima\u00e7\u00f5es CSS t\u00eam <i>muito<\/i> a agregar \u00e0 experi\u00eancia digital \u2014 tanto para voc\u00ea quanto para seus incr\u00edveis clientes ou visitantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-unique-story-and-experience\">Crie uma Hist\u00f3ria e Experi\u00eancia \u00danicas<\/h3>\n\n\n\n<p>Os dias dos sites funcionando como outdoors digitais est\u00e3o no espelho retrovisor.<\/p>\n\n\n\n<p>Na economia global, websites e aplicativos s\u00e3o sua melhor oportunidade para <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-tell-your-brand-story\/\" target=\"_blank\" rel=\"noopener\">contar a hist\u00f3ria da sua marca<\/a>.<\/p>\n\n\n\n<p>Por que focar na sua hist\u00f3ria? Porque uma \u00f3tima hist\u00f3ria destaca sua marca, captura a aten\u00e7\u00e3o do seu p\u00fablico ideal, cria conex\u00f5es duradouras e \u2014 talvez mais importante \u2014 inspira <i>a\u00e7\u00e3o<\/i>.<\/p>\n\n\n\n<p>E a sua hist\u00f3ria \u00e9, em parte, constru\u00edda sobre os elementos interativos que voc\u00ea inclui na sua experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<p>As anima\u00e7\u00f5es CSS s\u00e3o todas sobre criar experi\u00eancias \u00fanicas que reagem e se movem com o usu\u00e1rio, construindo um relacionamento e engajamento com a hist\u00f3ria da sua marca.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-revamp-and-maintain-with-fewer-keystrokes\">Renove e Mantenha com Menos Teclas<\/h3>\n\n\n\n<p>O CSS \u00e9 uma linguagem de codifica\u00e7\u00e3o organizada e relativamente breve. No mundo do desenvolvimento web, \u00e9 o que se conhece por &#8220;limpo&#8221;. Folhas de estilo podem geralmente ser mantidas no m\u00ednimo para projetos simples de aplicativos e sites.<\/p>\n\n\n\n<p>Isso significa que quando for hora de atualizar seu projeto, fazer manuten\u00e7\u00e3o de rotina, ou simplesmente renovar sua apar\u00eancia e experi\u00eancia \u2014 deve ser bastante r\u00e1pido localizar onde fazer a altera\u00e7\u00e3o, criar sua atualiza\u00e7\u00e3o e aplic\u00e1-la em toda a sua interface. N\u00e3o h\u00e1 necessidade de re-codificar e implantar muitos e muitos arquivos HTML individuais.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-optimize-your-speed\">Otimizar Sua Velocidade<\/h3>\n\n\n\n<p>O CSS \u00e9 considerado &#8220;leve&#8221; quando comparado ao JavaScript e outras linguagens de programa\u00e7\u00e3o, tornando-o uma excelente ferramenta para adicionar conte\u00fado e experi\u00eancias envolventes ao seu produto \u2014 sem tamb\u00e9m adicionar peso que retarda o carregamento.<\/p>\n\n\n\n<p>Al\u00e9m disso, tamb\u00e9m tende a ser agressivamente armazenado em Cache. Juntos, esses fatores significam que as anima\u00e7\u00f5es criadas usando CSS devem ser r\u00e1pidas para aparecer ap\u00f3s aquele primeiro clique, bem como em carregamentos subsequentes do seu site ou aplicativo.<\/p>\n\n\n\n<p>Como um <a href=\"https:\/\/www.searchenginejournal.com\/ranking-factors\/page-speed\/#close\" target=\"_blank\" rel=\"noopener\">fator importante de classifica\u00e7\u00e3o<\/a> quando se trata de resultados de pesquisa do Google, a velocidade \u00e9 algo em que todas as empresas com presen\u00e7a online deveriam pensar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/CSS-Button-Animation.gif\" alt=\"Anima\u00e7\u00e3o de Bot\u00e3o CSS\" class=\"wp-image-40207 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure><\/div>\n\n\n<h2 id=\"h-considerations-before-diving-into-css-animations\" class=\"wp-block-heading\">Considera\u00e7\u00f5es Antes de Mergulhar nas Anima\u00e7\u00f5es CSS<\/h2>\n\n\n\n<p>Agora entrando na zona de desacelera\u00e7\u00e3o. Antes de se aventurar de cabe\u00e7a nas anima\u00e7\u00f5es CSS, existem alguns pequenos obst\u00e1culos que queremos garantir que voc\u00ea esteja ciente e preparado para lidar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-compatibility-concerns\">Preocupa\u00e7\u00f5es com Compatibilidade<\/h3>\n\n\n\n<p>J\u00e1 reparou como algumas funcionalidades parecem desaparecer ou atrapalhar quando voc\u00ea est\u00e1 interagindo com um site pelo telefone \u2014&nbsp;ou deixam seu computador <i>extremamente<\/i> lento?<\/p>\n\n\n\n<p>Diferentes dispositivos (telefones m\u00f3veis, smartwatches, tablets, computadores, etc.) e navegadores (Chrome, Safari, Firefox, etc.) s\u00e3o todos constru\u00eddos usando diferentes tecnologias. Essas tecnologias significam como eles interagem com as linguagens de c\u00f3digo pode variar \u2014 e n\u00e3o \u00e9 diferente no caso das anima\u00e7\u00f5es CSS.<\/p>\n\n\n\n<p>Se voc\u00ea n\u00e3o fizer ajustes personalizados, um efeito de anima\u00e7\u00e3o que parece incrivelmente legal no Firefox com seu laptop pode parecer ou agir de forma estranha para algu\u00e9m que o visualize usando o Safari em seu telefone.<\/p>\n\n\n\n<p>O teste de garantia de qualidade (QA) \u00e9 fundamental para garantir que suas anima\u00e7\u00f5es CSS sejam compat\u00edveis em todos os locais onde os usu\u00e1rios interagem com sua presen\u00e7a digital.<\/p>\n\n\n\n<p><b>Solu\u00e7\u00e3o:<\/b> Use um <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener\">validador de CSS<\/a> e <a href=\"https:\/\/wordpress.com\/support\/how-to-find-your-themes-css\/\" target=\"_blank\" rel=\"noopener\">ferramentas de desenvolvedor do navegador<\/a> para ajudar a identificar problemas de compatibilidade e erros ao criar CSS. Aqueles que s\u00e3o especialmente h\u00e1beis com c\u00f3digo podem instalar uma biblioteca de mixins <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener\">Sass<\/a> como <a href=\"https:\/\/www.bourbon.io\/\" target=\"_blank\" rel=\"noopener\">Bourbon<\/a> para manter prefixos de navegador (<code>webkit<\/code> para Chrome e Safari, <code>moz<\/code> para Firefox, etc.) atualizados e compat\u00edveis.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-17-dynamic-css-animations-to-try-today\" class=\"wp-block-heading\">17 Anima\u00e7\u00f5es CSS Din\u00e2micas para Experimentar Hoje<\/h2>\n\n\n\n<p>Pronto para usar anima\u00e7\u00f5es CSS para criar experi\u00eancias digitais incr\u00edveis que atraem e ret\u00eam usu\u00e1rios? Pronto para aumentar a t\u00e3o importante velocidade do site e reduzir o tempo de manuten\u00e7\u00e3o e redesign?<\/p>\n\n\n\n<p>Ent\u00e3o voc\u00ea veio ao lugar certo! Compilamos algumas anima\u00e7\u00f5es CSS incr\u00edveis para o seu prazer visual. Clique em qualquer op\u00e7\u00e3o que chame a sua aten\u00e7\u00e3o para adquirir o c\u00f3digo de que precisa, e ent\u00e3o voc\u00ea pode adicion\u00e1-lo \u00e0 folha de estilo do seu site. (Para sua informa\u00e7\u00e3o, os Pens p\u00fablicos no CodePen s\u00e3o gratuitos para uso por qualquer pessoa para qualquer finalidade, conforme os detalhes de <a href=\"https:\/\/blog.codepen.io\/documentation\/licensing\/\" target=\"_blank\" rel=\"noopener\">licenciamento<\/a> deles.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-loading-animations\">Anima\u00e7\u00f5es de Carregamento<\/h3>\n\n\n\n<p>As anima\u00e7\u00f5es de carregamento podem n\u00e3o ser a classe mais empolgante de anima\u00e7\u00e3o CSS, mas s\u00e3o cr\u00edticas para a experi\u00eancia do usu\u00e1rio. Visitantes de aplicativos e sites tendem a ser mais pacientes com um pouco de tempo de carregamento quando voc\u00ea fornece um indicador de que algo \u00f3timo est\u00e1 por vir em breve.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><b>Loader CSS com pontos<\/b><\/a><b>\u201d por Aliaksei Peterson<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>At\u00e9 agora, uma linha pulsante de pontos \u00e9 universal para \u201cS\u00f3 um momento!\u201d Assim como o c\u00f3digo, esta op\u00e7\u00e3o \u00e9 clara e concisa, tornando-a uma boa escolha para uma presen\u00e7a online com um tom s\u00e9rio ou estilo minimalista.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><br>Loader CSS com pontos<\/a> de Aliaksei Peterson (<a href=\"https:\/\/codepen.io\/petersonby\" target=\"_blank\" rel=\"noopener\">@petersonby<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><b>Spinners de Carregamento Simples em HTML &amp; SVG<\/b><\/a><b>\u201d por Stephen Delaney&nbsp;<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Outro s\u00edmbolo cl\u00e1ssico de carregamento \u2014 o spinner. Esta anima\u00e7\u00e3o vem com uma op\u00e7\u00e3o para integrar um SVG, que significa Gr\u00e1fico Vetorial Escal\u00e1vel, que pode ser escalado sem perda de qualidade.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><br>Carregadores de Spinners Simples em HTML &amp; SVG<\/a> por Stephen Delaney (<a href=\"https:\/\/codepen.io\/sdelaney\" target=\"_blank\" rel=\"noopener\">@sdelaney<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><b>Anima\u00e7\u00e3o de Carregamento<\/b><\/a><b>\u201d por Mohamed Yousef<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Este conjunto girat\u00f3rio de formas semelhantes a l\u00e1grimas oferece uma anima\u00e7\u00e3o belamente simples para se perder, tornando um pouco mais de tempo de carregamento muito menos irritante. O que mais voc\u00ea poderia pedir?<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><br>Anima\u00e7\u00e3o de Carregamento<\/a> por Mohamed Yousef (<a href=\"https:\/\/codepen.io\/Freeps2\" target=\"_blank\" rel=\"noopener\">@Freeps2<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><b>Anima\u00e7\u00e3o Apenas em Css #02<\/b><\/a><b>\u201d por Hisami Kurita<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Uma anima\u00e7\u00e3o impressionante, puramente em CSS, que nos lembra a entrada de um site de um restaurante ou hotel sofisticado. Altere a cor e o nome para combinar com a sua pr\u00f3pria marca.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><br>Anima\u00e7\u00e3o Somente em Css #02<\/a> por Hisami Kurita (<a href=\"https:\/\/codepen.io\/hisamikurita\" target=\"_blank\" rel=\"noopener\">@hisamikurita<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><b>A Anima\u00e7\u00e3o do Carregador Brilhante &#8211; CSS Puro<\/b><\/a><b>\u201d por Maxime Rossignol<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>A tela de carregamento mais criativa que j\u00e1 vimos, esta anima\u00e7\u00e3o d\u00e1 ao espectador muito para observar enquanto espera que o resto dos seus elementos digitais ganhem vida.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><br>O Carregador Luminoso &#8211; Anima\u00e7\u00e3o CSS Pura<\/a> por Maxime Rossignol (<a href=\"https:\/\/codepen.io\/Maxoor\" target=\"_blank\" rel=\"noopener\">@Maxoor<\/a>)<br>em <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-animations\">Anima\u00e7\u00f5es de Conte\u00fado<\/h3>\n\n\n\n<p>Procurando uma maneira de garantir que os usu\u00e1rios do seu aplicativo e site n\u00e3o percam informa\u00e7\u00f5es cruciais? Destaque-as com uma dessas anima\u00e7\u00f5es CSS.<\/p>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><b>Anima\u00e7\u00e3o de Texto em Mudan\u00e7a CSS<\/b><\/a><b>\u201d por Coding Yaar<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Adicione um pouco de destaque a t\u00edtulos e outros textos importantes com esta anima\u00e7\u00e3o, que inclui detalhes como movimento de deslize, mudan\u00e7a de cores e mais.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><br>Anima\u00e7\u00e3o de Texto em Mudan\u00e7a CSS<\/a> por Coding Yaar (<a href=\"https:\/\/codepen.io\/codingyaar\" target=\"_blank\" rel=\"noopener\">@codingyaar<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><b>Efeito de Revela\u00e7\u00e3o de Bloco CSS<\/b><\/a><b>\u201d por Abubaker Saeed<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>O efeito de &#8220;revela\u00e7\u00e3o&#8221; com essa anima\u00e7\u00e3o oferece mais uma maneira interessante de atrair a aten\u00e7\u00e3o para elementos de conte\u00fado importantes que voc\u00ea deseja garantir que os visitantes n\u00e3o percam.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><br>Efeito de Revela\u00e7\u00e3o de Bloco CSS<\/a> por Abubaker Saeed (<a href=\"https:\/\/codepen.io\/AbubakerSaeed\" target=\"_blank\" rel=\"noopener\">@AbubakerSaeed<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><b>Revelador CSS<\/b><\/a><b>\u201d por Adam Kuhn<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Com muitas fontes interessantes, bot\u00f5es animados e um recurso de virar que revela mais informa\u00e7\u00f5es \u2014&nbsp;esta parece ser uma \u00f3tima op\u00e7\u00e3o para introduzir os usu\u00e1rios a se\u00e7\u00f5es mais longas de conte\u00fado imperd\u00edvel como Perguntas Frequentes, funcionalidades, etc.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><br>Revelador CSS<\/a> por Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>em <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><b>Cart\u00e3o Informativo Animado<\/b><\/a><b>\u201d por Adam Kuhn<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Do mesmo criador da anima\u00e7\u00e3o CSS anterior, esta op\u00e7\u00e3o apresenta outra forma ousada e criativa de guiar os usu\u00e1rios pelos elementos da hist\u00f3ria da sua marca.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><br>Animated Info Card<\/a> por Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>em <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-button-animations\">Anima\u00e7\u00f5es de Bot\u00e3o<\/h3>\n\n\n\n<p>Os bot\u00f5es s\u00e3o frequentemente o portal para levar os usu\u00e1rios a tomar uma a\u00e7\u00e3o ou mergulhar mais fundo no seu conte\u00fado. Inspire intera\u00e7\u00e3o adicionando anima\u00e7\u00f5es CSS aos bot\u00f5es importantes.<\/p>\n\n\n\n<ol start=\"10\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/RazorXio\/details\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><b>Efeito de Deslize no Bot\u00e3o CSS ao Passar o Mouse<\/b><\/a><b>\u201d por RazorX<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Muitas op\u00e7\u00f5es aqui para adicionar anima\u00e7\u00f5es de preenchimento de cor a bot\u00f5es que, de outra forma, seriam simples.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/RazorXio\/pen\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><br>Efeito de Deslizamento no Hover do Bot\u00e3o CSS<\/a> por RazorX (<a href=\"https:\/\/codepen.io\/RazorXio\" target=\"_blank\" rel=\"noopener\">@RazorXio<\/a>)<br>em <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"11\" class=\"wp-block-list\">\n<li><b>\u201c<\/b><a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><b>Anima\u00e7\u00f5es de Bot\u00e3o<\/b><\/a><b>\u201d por Alex Belmonte<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Quer adicionar um pouco de movimento \u00e0queles bot\u00f5es? Adicione um efeito de passagem do mouse e a\u00e7\u00f5es como saltar, balan\u00e7ar e mais aos seus bot\u00f5es com este CSS.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><br>Anima\u00e7\u00f5es de Bot\u00e3o<\/a> por Alex Belmonte (<a href=\"https:\/\/codepen.io\/AlexBelmonte\" target=\"_blank\" rel=\"noopener\">@AlexBelmonte<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"12\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><b>Efeito de hover em bot\u00e3o CSS<\/b><\/a><b>\u201d por Julia<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Uma lavagem de cor m\u00ednima, mas impactante, adiciona alguma surpresa e encanto aos seus bot\u00f5es.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><br>Efeito de hover em bot\u00e3o CSS<\/a> de Julia (<a href=\"https:\/\/codepen.io\/sfoxy\" target=\"_blank\" rel=\"noopener\">@sfoxy<\/a>)<br>em <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-background-animations\">Anima\u00e7\u00f5es de Fundo<\/h3>\n\n\n\n<p>Voc\u00ea deseja que os fundos de certos elementos do seu site ou aplicativo sejam <i>apenas<\/i> interessantes o suficiente para chamar a aten\u00e7\u00e3o \u2014 sem ofuscar o que voc\u00ea deseja que os usu\u00e1rios leiam e fa\u00e7am.<\/p>\n\n\n\n<ol start=\"13\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><b>Gradiente de Fundo Animado<\/b><\/a><b>\u201d por Mario Klingemann<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Aplique este loop infinito de cores ao fundo das se\u00e7\u00f5es principais do seu site ou aplicativo para adicionar um toque de movimento.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><br>Gradiente de Fundo Animado<\/a> por Mario Klingemann (<a href=\"https:\/\/codepen.io\/quasimondo\" target=\"_blank\" rel=\"noopener\">@quasimondo<\/a>)<br>em <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"14\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><b> Anima\u00e7\u00f5es CSS com SVGs<\/b><\/a><b>\u201d por Joyanna<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Formas suaves e coloridas com movimentos delicados criam um fundo distintivo para as suas se\u00e7\u00f5es mais importantes de conte\u00fado.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><br>Anima\u00e7\u00f5es em CSS com SVGs<\/a> por Joyanna (<a href=\"https:\/\/codepen.io\/joyanna\" target=\"_blank\" rel=\"noopener\">@joyanna<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"15\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><b>Scroll parallax simples<\/b><\/a><b>\u201d por Ungmo Lee<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Uma anima\u00e7\u00e3o de rolagem parallax permite que tanto o primeiro plano quanto o fundo se movam, mas em velocidades diferentes para criar a ilus\u00e3o de profundidade. Como voc\u00ea pode ver no exemplo, o efeito parallax pode ser esmagador quando n\u00e3o aplicado com modera\u00e7\u00e3o.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><br>Scroll parallax simples<\/a> por Ungmo Lee (<a href=\"https:\/\/codepen.io\/ungmo2\" target=\"_blank\" rel=\"noopener\">@ungmo2<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-anywhere-animations\">Anima\u00e7\u00f5es em Qualquer Lugar<\/h3>\n\n\n\n<p>Experimente essas anima\u00e7\u00f5es CSS apenas por divers\u00e3o para adicionar um pouco de *tempero* em v\u00e1rios pontos da experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<ol start=\"16\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><b>Modelo: Logo<\/b><\/a><b>\u201d por Alex Katz<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Passe o mouse sobre o logotipo para ver um leve efeito de expans\u00e3o. Esse movimento sutil pode ser usado em logotipos, bem como em bot\u00f5es, \u00edcones e outros componentes.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><br>Template: Logo<\/a> por Alex Katz (<a href=\"https:\/\/codepen.io\/katzkode\" target=\"_blank\" rel=\"noopener\">@katzkode<\/a>)<br>no <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"17\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><b>Anima\u00e7\u00e3o Flutuante &#8211; CSS<\/b><\/a><b>\u201d por Mario Duarte<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Um efeito flutuante suave como este \u00e9 outro toque surpreendente e divertido que mostra aos espectadores que voc\u00ea se importa com suas propriedades digitais assim como com a experi\u00eancia deles.<\/p>\n\n\n\n<p>Veja o Pen <a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><br>Anima\u00e7\u00e3o Flutuante &#8211; CSS<\/a> por Mario Duarte (<a href=\"https:\/\/codepen.io\/MarioDesigns\" target=\"_blank\" rel=\"noopener\">@MarioDesigns<\/a>)<br>em <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h2 id=\"h-how-to-add-css-to-your-website\" class=\"wp-block-heading\">Como Adicionar CSS ao Seu Site<\/h2>\n\n\n\n<p>Cada uma das anima\u00e7\u00f5es CSS acima \u00e9 acompanhada por HTML, CSS e, \u00e0s vezes, outro c\u00f3digo que voc\u00ea pode colar diretamente na sua folha de estilo do site e editar conforme necess\u00e1rio para personaliz\u00e1-lo.<\/p>\n\n\n\n<p>Se voc\u00ea tem um site personalizado onde gerencia o c\u00f3digo e ainda n\u00e3o est\u00e1 familiarizado com o CSS, achamos que seria \u00fatil conhecer a linguagem antes de tentar implementar as anima\u00e7\u00f5es acima. Aprenda os conceitos b\u00e1sicos de criar uma linha de c\u00f3digo e depois mergulhe nos melhores tutoriais para desenvolver suas habilidades em CSS com o guia da <a href=\"https:\/\/www.dreamhost.com\/pt\/\" target=\"_blank\" rel=\"noopener\">DreamHost<\/a> para <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-css\/\" target=\"_blank\" rel=\"noopener\">aprender CSS<\/a>.<\/p>\n\n\n\n<p>Voc\u00ea notar\u00e1 pelos exemplos acima que pode ser necess\u00e1rio bastante c\u00f3digo para criar uma anima\u00e7\u00e3o. Se voc\u00ea est\u00e1 confort\u00e1vel com CSS e pronto para otimizar espa\u00e7o e tempo, considere usar uma <a href=\"https:\/\/coderpad.io\/blog\/development\/top-10-css-animation-libraries\/\" target=\"_blank\" rel=\"noopener\">biblioteca de anima\u00e7\u00e3o CSS<\/a>. Cada biblioteca ter\u00e1 instru\u00e7\u00f5es sobre como adicion\u00e1-la ao seu site, geralmente envolvendo a adi\u00e7\u00e3o de um arquivo fonte ou <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-de-uso-de-cdn-com-wordpress\/\" target=\"_blank\" rel=\"noopener\">CDN<\/a> \u00e0 sua marca\u00e7\u00e3o. Uma vez instalado, voc\u00ea pode usar o shorthand espec\u00edfico da biblioteca para adicionar suas anima\u00e7\u00f5es.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CDN<\/h3>\n    <p>CDN \u00e9 a abrevia\u00e7\u00e3o de u201cRede de Entrega de Conte\u00fadou201d. Refere-se a uma rede geograficamente distribu\u00edda de servidores web (e seus centros de dados). As entidades que comp\u00f5em uma CDN colaboram para garantir a entrega r\u00e1pida de conte\u00fado via internet.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/cdn\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Se voc\u00ea est\u00e1 utilizando um site WordPress, a pr\u00f3pria plataforma oferece um guia \u00fatil para <a href=\"https:\/\/wordpress.com\/support\/editing-css\/\" target=\"_blank\" rel=\"noopener\">editar CSS<\/a> usando o Site Editor (um recurso beta dispon\u00edvel em alguns temas) ou o Customizer (dispon\u00edvel na maioria dos temas cl\u00e1ssicos e em alguns temas de terceiros). Dentro dessas telas de edi\u00e7\u00e3o \u00e9 onde voc\u00ea colar\u00e1 o c\u00f3digo dos nossos exemplos de anima\u00e7\u00e3o CSS acima.<\/p>\n\n\n\n<p>Mas e se um site que permita contar a hist\u00f3ria da sua marca ainda \u00e9 apenas um sonho? Ent\u00e3o temos boas not\u00edcias, porque na DreamHost n\u00f3s <i>nos especializamos<\/i> em tornar os sonhos de sites uma realidade. Com <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/design\/design-web-personalizado\/\" target=\"_blank\" rel=\"noopener\">design web personalizado<\/a>, um construtor de sites WP <a href=\"https:\/\/www.dreamhost.com\/pt\/criador-sites-web-ia\/\" target=\"_blank\" rel=\"noopener\">f\u00e1cil de usar<\/a>, <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/\" target=\"_blank\" rel=\"noopener\">servi\u00e7os profissionais<\/a> de nossos especialistas internos e, claro, robustas op\u00e7\u00f5es de <a href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/\" target=\"_blank\" rel=\"noopener\">Hospedagem<\/a> \u2014 <b>a DreamHost ajudar\u00e1 voc\u00ea a colocar seu sonho online.<\/b><\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Conquiste Mais Visitantes, Expanda Seu Neg\u00f3cio\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nossos especialistas em marketing ajudar\u00e3o voc\u00ea a ganhar mais tr\u00e1fego e converter mais visitantes do site, para que voc\u00ea possa focar na gest\u00e3o do seu neg\u00f3cio.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/marketing\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Saiba Mais                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Anima\u00e7\u00f5es cativantes que prendem seu olhar enquanto uma p\u00e1gina \u00e9 carregada. Transi\u00e7\u00f5es suaves que o guiam sem esfor\u00e7o pelo conte\u00fado de um site. Explos\u00f5es inesperadas de cor e movimento ao interagir com bot\u00f5es em um aplicativo. Embora sutis, esses elementos influenciam grandemente sua percep\u00e7\u00e3o de uma marca e sua experi\u00eancia digital geral. Ent\u00e3o, o que traz esses detalhes envolventes [\u2026]<\/p>\n","protected":false},"author":1058,"featured_media":40203,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-meet-css\",\"Conhe\u00e7a o CSS\"],[\"h-3-awesome-reasons-to-implement-css-animations\",\"3 Raz\u00f5es Incr\u00edveis para Implementar Anima\u00e7\u00f5es CSS\"],[\"h-considerations-before-diving-into-css-animations\",\"Considera\u00e7\u00f5es Antes de Mergulhar nas Anima\u00e7\u00f5es CSS\"],[\"h-17-dynamic-css-animations-to-try-today\",\"17 Anima\u00e7\u00f5es CSS Din\u00e2micas para Experimentar Hoje\"],[\"h-how-to-add-css-to-your-website\",\"Como Adicionar CSS ao Seu Site\"]]","hide_toc":false,"footnotes":""},"categories":[14407,14391],"tags":[],"class_list":["post-52127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt","category-tutoriais-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es\" \/>\n<meta property=\"og:description\" content=\"Anima\u00e7\u00f5es cativantes que prendem seu olhar enquanto uma p\u00e1gina \u00e9 carregada. Transi\u00e7\u00f5es suaves que o guiam sem esfor\u00e7o pelo conte\u00fado de um site. Explos\u00f5es inesperadas de cor e movimento ao interagir com bot\u00f5es em um aplicativo. Embora sutis, esses elementos influenciam grandemente sua percep\u00e7\u00e3o de uma marca e sua experi\u00eancia digital geral. Ent\u00e3o, o que traz esses detalhes envolventes [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-24T14:00:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:57:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/","og_locale":"en_US","og_type":"article","og_title":"Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es","og_description":"Anima\u00e7\u00f5es cativantes que prendem seu olhar enquanto uma p\u00e1gina \u00e9 carregada. Transi\u00e7\u00f5es suaves que o guiam sem esfor\u00e7o pelo conte\u00fado de um site. Explos\u00f5es inesperadas de cor e movimento ao interagir com bot\u00f5es em um aplicativo. Embora sutis, esses elementos influenciam grandemente sua percep\u00e7\u00e3o de uma marca e sua experi\u00eancia digital geral. Ent\u00e3o, o que traz esses detalhes envolventes [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-04-24T14:00:33+00:00","article_modified_time":"2025-05-26T19:57:18+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-05-26T19:57:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/"},"wordCount":2947,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","articleSection":["Design de Sites","Tutoriais"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/","name":"Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-05-26T19:57:18+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","width":1460,"height":1095,"caption":"Enhance Your Website With CSS Animations Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/animacao-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Anima\u00e7\u00f5es CSS: Enrique\u00e7a Seu Site com Estas 17 Op\u00e7\u00f5es"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"pt","translations":{"pt":52127,"es":40223,"en":40202,"de":52130,"uk":52140,"pl":54840,"ru":54925,"it":68519,"fr":70615,"nl":70651},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52127"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52127\/revisions"}],"predecessor-version":[{"id":62264,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52127\/revisions\/62264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40203"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}