{"id":1772,"date":"2025-07-09T21:11:18","date_gmt":"2025-07-10T00:11:18","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1772"},"modified":"2025-07-09T21:12:42","modified_gmt":"2025-07-10T00:12:42","slug":"animacao-keyframes-com-html-css-e-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1772","title":{"rendered":"Anima\u00e7\u00e3o (@keyframes) com HTML CSS e JavaScript"},"content":{"rendered":"\n<p>As anima\u00e7\u00f5es na web deixaram de ser apenas elementos decorativos para se tornarem ferramentas fundamentais na cria\u00e7\u00e3o de experi\u00eancias interativas e atraentes. No desenvolvimento front-end, os recursos de anima\u00e7\u00e3o oferecidos pelo CSS, em especial por meio da regra <code>@keyframes<\/code>, permitem criar movimentos suaves, transi\u00e7\u00f5es visuais envolventes e uma melhor comunica\u00e7\u00e3o visual com os usu\u00e1rios. Quando aliadas ao HTML e JavaScript, essas anima\u00e7\u00f5es podem ganhar ainda mais dinamismo e controle, tornando-se elementos essenciais em mini projetos e prot\u00f3tipos interativos.<\/p>\n\n\n\n<p>A diretiva <code>@keyframes<\/code> do CSS define os estados intermedi\u00e1rios de uma anima\u00e7\u00e3o, permitindo que o desenvolvedor controle como um elemento deve se comportar ao longo do tempo. Por exemplo, \u00e9 poss\u00edvel animar a posi\u00e7\u00e3o, a cor, a opacidade, a escala e muitos outros estilos CSS, desde que sejam propriedades anim\u00e1veis. Com ela, \u00e9 poss\u00edvel construir efeitos como fade-in, fade-out, deslizar elementos, criar loaders personalizados, anima\u00e7\u00f5es de entrada em p\u00e1ginas e at\u00e9 microintera\u00e7\u00f5es \u2014 pequenas anima\u00e7\u00f5es que respondem a a\u00e7\u00f5es do usu\u00e1rio, como cliques e passagens do mouse.<\/p>\n\n\n\n<p>Do ponto de vista conceitual, a <code>@keyframes<\/code> representa uma evolu\u00e7\u00e3o em rela\u00e7\u00e3o \u00e0s anima\u00e7\u00f5es manuais feitas exclusivamente com JavaScript. Embora o JavaScript ainda seja indispens\u00e1vel para casos que requerem l\u00f3gica condicional ou intera\u00e7\u00f5es complexas, o CSS com <code>@keyframes<\/code> oferece melhor desempenho para anima\u00e7\u00f5es simples e m\u00e9dias, pois \u00e9 processado diretamente pelo navegador de forma mais eficiente. Al\u00e9m disso, a sintaxe clara e a integra\u00e7\u00e3o direta com classes CSS facilitam a manuten\u00e7\u00e3o e o reaproveitamento do c\u00f3digo.<\/p>\n\n\n\n<p>Incorporar anima\u00e7\u00f5es com <code>@keyframes<\/code> em mini projetos \u00e9 altamente recomend\u00e1vel. Al\u00e9m de enriquecer a apresenta\u00e7\u00e3o visual, essas anima\u00e7\u00f5es ajudam a refor\u00e7ar a identidade da interface, a guiar o olhar do usu\u00e1rio e a proporcionar um feedback visual imediato. Por exemplo, em um formul\u00e1rio de login, uma anima\u00e7\u00e3o sutil no bot\u00e3o ao ser clicado pode indicar ao usu\u00e1rio que sua a\u00e7\u00e3o foi registrada, enquanto uma transi\u00e7\u00e3o suave entre telas pode evitar que a navega\u00e7\u00e3o pare\u00e7a abrupta.<\/p>\n\n\n\n<p>Em mini projetos educacionais, o uso de <code>@keyframes<\/code> tamb\u00e9m tem um papel importante na fixa\u00e7\u00e3o de conceitos fundamentais de tempo, estados e ciclos de execu\u00e7\u00e3o. O desenvolvedor iniciante aprende a pensar de maneira mais visual e din\u00e2mica, compreendendo como pequenas mudan\u00e7as de estilo ao longo do tempo podem gerar grandes impactos na experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<p>Al\u00e9m disso, as anima\u00e7\u00f5es contribuem para o engajamento. Em prot\u00f3tipos de sites, jogos simples ou p\u00e1ginas promocionais, o uso adequado de anima\u00e7\u00f5es pode tornar a aplica\u00e7\u00e3o mais moderna e profissional, mesmo que a l\u00f3gica por tr\u00e1s seja simples. Isso eleva o valor do projeto e pode atrair mais aten\u00e7\u00e3o de usu\u00e1rios, avaliadores ou potenciais clientes.<\/p>\n\n\n\n<p>Portanto, dominar e aplicar <code>@keyframes<\/code> em projetos, mesmo que pequenos, \u00e9 uma pr\u00e1tica essencial para qualquer desenvolvedor front-end. A combina\u00e7\u00e3o de HTML para estrutura, CSS para estilo e anima\u00e7\u00e3o, e JavaScript para controle, forma a base de interfaces ricas e funcionais. E o melhor: com desempenho, simplicidade e um toque de criatividade.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML \n\n&lt;!DOCTYPE html>\n&lt;html lang=\"pt-BR\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>Imagens com Hover Animado&lt;\/title>  \n  &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n&lt;div class=\"container\">\n  &lt;div class=\"imagens\">\n    &lt;img src=\"img\/img1.jpg\" alt=\"img1\">\n    &lt;img src=\"img\/img2.jpg\" alt=\"img2\">\n    &lt;img src=\"img\/img3.jpg\" alt=\"img3\">\n    &lt;img src=\"img\/img4.jpg\" alt=\"img4\">\n  &lt;\/div>\n&lt;\/div>\n  \n&lt;script src=\"script.js\">&lt;\/script>\n&lt;\/body>\n&lt;\/html>\n\nCSS\n\nbody{\nfont-family: sans-serif;\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nheight: 100vh;\nmargin: 0;\nbackground: url('img\/img5.jpg') no-repeat center center fixed;\nbackground-size: cover;\n}\n.container{\nbackground-position: center;\nbackground-repeat: no-repeat;\nposition: relative;\nwidth: 570px;\npadding: 20px;\nborder-radius: 20px;\nbackdrop-filter: blur(15px);\nborder: 4px solid rgba(73,72,73,0.7);\noverflow: hidden;\ntext-align: center;\n}\n\n.imagens{\ndisplay: flex;\ngap: 10px;\n}\n.imagens img{\nwidth: 80px;\nheight: 300px;\nobject-fit: cover;\n\nborder-radius: 6px;\ncursor: pointer;\ntransition: width 0.4s ease;\n\n}\n\n.expandir{\nanimation: expandir 0.4s forwards;\n}\n.diminuir{\nanimation: diminuir 0.4s forwards;\n}\n\n@keyframes expandir{\nfrom{ width:80px; }\nto { width: 300px;}\n}\n\n@keyframes diminuir{\nfrom{ width:300px; }\nto { width: 80px;}\n}\n\nJavaScript\n\nconst imgs = document.querySelectorAll('.imagens img');\n\nimgs.forEach(img => {\nimg.addEventListener('mouseenter', ()=>{\n     img.classList.remove('diminuir');\n     img.classList.add('expandir');\n});\n\nimg.addEventListener('mouseleave', ()=>{\n    img.classList.remove('expandir');\n    img.classList.add('diminuir');\n});\n\n});\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As anima\u00e7\u00f5es na web deixaram de ser apenas elementos decorativos para se tornarem ferramentas fundamentais na cria\u00e7\u00e3o de experi\u00eancias interativas e atraentes. No desenvolvimento front-end, os recursos de anima\u00e7\u00e3o oferecidos pelo CSS, em especial por meio da regra @keyframes, permitem criar movimentos suaves, transi\u00e7\u00f5es visuais envolventes e uma melhor comunica\u00e7\u00e3o visual com os usu\u00e1rios. Quando aliadas ao HTML e JavaScript, essas anima\u00e7\u00f5es podem ganhar ainda mais dinamismo e controle, tornando-se elementos essenciais em mini projetos e prot\u00f3tipos interativos. A diretiva @keyframes do CSS define os estados intermedi\u00e1rios de uma anima\u00e7\u00e3o, permitindo que o desenvolvedor controle como um elemento deve se comportar ao longo do tempo. Por exemplo, \u00e9 poss\u00edvel animar a posi\u00e7\u00e3o, a cor, a opacidade, a escala e muitos outros estilos CSS, desde que sejam propriedades anim\u00e1veis. Com ela, \u00e9 poss\u00edvel construir efeitos como fade-in, fade-out, deslizar elementos, criar loaders personalizados, anima\u00e7\u00f5es de entrada em p\u00e1ginas e at\u00e9 microintera\u00e7\u00f5es \u2014 pequenas anima\u00e7\u00f5es que respondem a a\u00e7\u00f5es do usu\u00e1rio, como cliques e passagens do mouse. Do ponto de vista conceitual, a @keyframes representa uma evolu\u00e7\u00e3o em rela\u00e7\u00e3o \u00e0s anima\u00e7\u00f5es manuais feitas exclusivamente com JavaScript. Embora o JavaScript ainda seja indispens\u00e1vel para casos que requerem l\u00f3gica condicional ou intera\u00e7\u00f5es complexas, o CSS com @keyframes oferece melhor desempenho para anima\u00e7\u00f5es simples e m\u00e9dias, pois \u00e9 processado diretamente pelo navegador de forma mais eficiente. Al\u00e9m disso, a sintaxe clara e a integra\u00e7\u00e3o direta com classes CSS facilitam a manuten\u00e7\u00e3o e o reaproveitamento do c\u00f3digo. Incorporar anima\u00e7\u00f5es com @keyframes em mini projetos \u00e9 altamente recomend\u00e1vel. Al\u00e9m de enriquecer a apresenta\u00e7\u00e3o visual, essas anima\u00e7\u00f5es ajudam a refor\u00e7ar a identidade da interface, a guiar o olhar do usu\u00e1rio e a proporcionar um feedback visual imediato. Por exemplo, em um formul\u00e1rio de login, uma anima\u00e7\u00e3o sutil no bot\u00e3o ao ser clicado pode indicar ao usu\u00e1rio que sua a\u00e7\u00e3o foi registrada, enquanto uma transi\u00e7\u00e3o suave entre telas pode evitar que a navega\u00e7\u00e3o pare\u00e7a abrupta. Em mini projetos educacionais, o uso de @keyframes tamb\u00e9m tem um papel importante na fixa\u00e7\u00e3o de conceitos fundamentais de tempo, estados e ciclos de execu\u00e7\u00e3o. O desenvolvedor iniciante aprende a pensar de maneira mais visual e din\u00e2mica, compreendendo como pequenas mudan\u00e7as de estilo ao longo do tempo podem gerar grandes impactos na experi\u00eancia do usu\u00e1rio. Al\u00e9m disso, as anima\u00e7\u00f5es contribuem para o engajamento. Em prot\u00f3tipos de sites, jogos simples ou p\u00e1ginas promocionais, o uso adequado de anima\u00e7\u00f5es pode tornar a aplica\u00e7\u00e3o mais moderna e profissional, mesmo que a l\u00f3gica por tr\u00e1s seja simples. Isso eleva o valor do projeto e pode atrair mais aten\u00e7\u00e3o de usu\u00e1rios, avaliadores ou potenciais clientes. Portanto, dominar e aplicar @keyframes em projetos, mesmo que pequenos, \u00e9 uma pr\u00e1tica essencial para qualquer desenvolvedor front-end. A combina\u00e7\u00e3o de HTML para estrutura, CSS para estilo e anima\u00e7\u00e3o, e JavaScript para controle, forma a base de interfaces ricas e funcionais. E o melhor: com desempenho, simplicidade e um toque de criatividade.<\/p>\n","protected":false},"author":1,"featured_media":1773,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1772"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1772"}],"version-history":[{"count":4,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1772\/revisions"}],"predecessor-version":[{"id":1777,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1772\/revisions\/1777"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/1773"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}