{"id":28892,"date":"2024-04-24T09:20:52","date_gmt":"2024-04-24T08:20:52","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/controla-tus-animaciones-css-usando-javascript-de-manera-practica\/"},"modified":"2024-06-03T17:43:10","modified_gmt":"2024-06-03T16:43:10","slug":"controla-tus-animaciones-css-usando-javascript-de-manera-practica","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/","title":{"rendered":"Control your CSS Animations Using JavaScript in a Practical Way"},"content":{"rendered":"<hr \/>\n<p>Interactivity on web pages is no longer just an option, but a necessity in modern interface design. The combination of CSS and JavaScript offers us a universe of possibilities to create dynamic and attractive experiences for users. In this short course, we&#039;ll explore how to control CSS animations using JavaScript, from basic fundamentals to more advanced techniques.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#%C2%BFQue_son_las_Animaciones_CSS\" >What are CSS Animations?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#%C2%BFPor_Que_Integrar_JavaScript\" >Why Integrate JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Iniciando_con_JavaScript_en_tus_Animaciones\" >Getting started with JavaScript in your Animations<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Obtener_Elementos_y_Asignar_Estilos\" >Get Elements and Assign Styles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Controlando_Animaciones_con_Eventos\" >Controlling Animations with Events<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Manipulacion_de_Keyframes\" >Keyframe Manipulation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Uso_Avanzado_Reactividad_y_Eventos_Combinados\" >Advanced Use: Reactivity and Combined Events<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Ejemplo_Practico\" >Practical example:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Pruebas_y_Debugging\" >Testing and Debugging<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/control-your-css-animations-using-javascript-in-a-practical-way\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_las_Animaciones_CSS\"><\/span>What are CSS Animations?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we delve into how to handle these animations with JavaScript, it is crucial to understand what they are. CSS animations allow HTML elements to change style over time without using JavaScript for these style changes. This is done by specifying keyframes that describe the initial, final, and possibly intermediate states of the animation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFPor_Que_Integrar_JavaScript\"><\/span>Why Integrate JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>While CSS is powerful on its own for creating simple animations, JavaScript allows us to add a layer of interactivity that responds to user behavior, manipulating animations in real time depending on the interaction on the page.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Iniciando_con_JavaScript_en_tus_Animaciones\"><\/span>Getting started with JavaScript in your Animations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Obtener_Elementos_y_Asignar_Estilos\"><\/span>Get Elements and Assign Styles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First, we need to select the HTML element we want to animate. This can be done using <code>document.querySelector()<\/code> o <code>document.getElementById()<\/code> among other DOM selection methods. For example:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const myItem = document.querySelector(&#039;.my-class&#039;);<\/code><\/pre>\n<p>Once the element is selected, we can manipulate its styles directly from JavaScript, including starting and stopping animations defined in CSS.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Controlando_Animaciones_con_Eventos\"><\/span>Controlling Animations with Events<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript really shines when used to react to events. Let&#039;s say you want an animation to start when the user clicks a button. You could set a click event that changes the class of the element, thus triggering a predefined CSS animation.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.getElementById(&#039;my-button&#039;).addEventListener(&#039;click&#039;, () =&gt; { myElement.classList.toggle(&#039;active-animation&#039;); });<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Manipulacion_de_Keyframes\"><\/span>Keyframe Manipulation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>What&#039;s more, you can manipulate the keyframes of your animations directly from JavaScript. This can be achieved using the Web Animations API, which provides a method to control CSS animations in a more granular and controlled manner.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">myElement.animate([ { transform: &#039;translateX(0px)&#039; }, { transform: &#039;translateX(100px)&#039; } ], { duration: 1000, iterations: Infinity });<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Uso_Avanzado_Reactividad_y_Eventos_Combinados\"><\/span>Advanced Use: Reactivity and Combined Events<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Imagine you want an animation to respond not just to a click, but to a series of interactions, or to change based on screen size or device orientation. This is where refined handling with JavaScript becomes essential.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_Practico\"><\/span>Practical example:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Create a progress bar that animates not only when loading the page, but also when scrolling.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">window.addEventListener(&#039;scroll&#039;, () =&gt; { const max = document.body.scrollHeight - window.innerHeight; const percentage = (window.pageYOffset \/ max) * 100; myItem.style.width = `${percent }%`;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Pruebas_y_Debugging\"><\/span>Testing and Debugging<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When working with animations, it is essential to test on different browsers and devices. Be sure to review your animations in different environments to ensure a consistent experience for all users.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Integrating CSS and JavaScript to control animations may seem challenging at first, but it offers great reward in terms of the richness of interaction and dynamism you can achieve in your web projects. Remember to visit <a href=\"https:\/\/nelkodev.com\/en\/\">my blog<\/a> for more guides and tips on web development.<\/p>\n<p>Do you have questions or need help with your projects? Don&#039;t hesitate to contact me through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>.<\/p>\n<p>Creating impactful animations is just the beginning. The real magic comes when these animations interact with your users fluidly and naturally, making your website not only seen, but experienced.<\/p>","protected":false},"excerpt":{"rendered":"<p>Interactivity on web pages is no longer just an option, but a necessity in modern interface design. The combination of CSS and JavaScript offers us a universe of possibilities to create dynamic and engaging experiences for users. In this short course, we will explore how to control CSS animations using JavaScript, from the basics to the basics.<\/p>","protected":false},"author":1,"featured_media":28893,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[684,205,2003,519,2205,185,469,1214,1008,122,1273],"class_list":["post-28892","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-animaciones","tag-blog","tag-controla","tag-css","tag-frontend","tag-javascript","tag-manera","tag-practica","tag-pruebas","tag-tus","tag-usando"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28892"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28892\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28893"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}