{"id":28868,"date":"2024-04-10T12:28:20","date_gmt":"2024-04-10T11:28:20","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/controlando-animaciones-css-con-javascript-guia-completa\/"},"modified":"2024-06-03T17:43:00","modified_gmt":"2024-06-03T16:43:00","slug":"controlando-animaciones-css-con-javascript-guia-completa","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/controlling-css-animations-with-javascript-complete-guide\/","title":{"rendered":"Controlling CSS Animations with JavaScript: Complete Guide"},"content":{"rendered":"<p>Modern web development revolves around creating interactive and enjoyable experiences for users. One of the most powerful tools to achieve this is the combination of CSS and JavaScript, especially in the field of animations. The ability to manipulate CSS animations with JavaScript not only enriches interactivity but also allows developers to design more dynamic and reactive interfaces.<\/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\/controlling-css-animations-with-javascript-complete-guide\/#%C2%BFPor_que_Usar_JavaScript_para_Controlar_Animaciones_CSS\" >Why Use JavaScript to Control 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\/controlling-css-animations-with-javascript-complete-guide\/#Iniciando_con_las_Bases_CSS_y_JavaScript\" >Starting with the Basics: CSS and JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/controlling-css-animations-with-javascript-complete-guide\/#Definiendo_una_Animacion_con_CSS\" >Defining an Animation with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/controlling-css-animations-with-javascript-complete-guide\/#Manipulando_CSS_con_JavaScript\" >Manipulating CSS with JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/controlling-css-animations-with-javascript-complete-guide\/#Controlando_Animaciones_con_JavaScript\" >Controlling Animations with JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/controlling-css-animations-with-javascript-complete-guide\/#Iniciar_una_Animacion_en_Respuesta_a_un_Evento\" >Start an Animation in Response to an Event<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/controlling-css-animations-with-javascript-complete-guide\/#Pausa_y_Reanudacion_de_Animaciones\" >Pause and Resume Animations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/controlling-css-animations-with-javascript-complete-guide\/#Cambiando_Propiedades_de_Animacion_Dinamicamente\" >Changing Animation Properties Dynamically<\/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\/controlling-css-animations-with-javascript-complete-guide\/#Consideraciones_de_Rendimiento\" >Performance Considerations<\/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\/controlling-css-animations-with-javascript-complete-guide\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFPor_que_Usar_JavaScript_para_Controlar_Animaciones_CSS\"><\/span>Why Use JavaScript to Control CSS Animations?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS animations are great for simple movements and aesthetic transitions because they are easy to implement and require fewer system resources, making them more performance efficient. However, JavaScript comes into play when you need greater control over animation sequencing, responses to user actions, or complex manipulations based on programming logic.<\/p>\n<p>The interaction between CSS and JavaScript allows:<\/p>\n<ul>\n<li>Start, pause, and stop animations based on user events.<\/li>\n<li>Dynamically change animation properties at runtime.<\/li>\n<li>Create conditional animations that depend on the state or behavior of the application.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Iniciando_con_las_Bases_CSS_y_JavaScript\"><\/span>Starting with the Basics: CSS and JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we dive into specific techniques, it&#039;s essential to understand how to basically work with CSS and JavaScript. CSS allows you to define static styles while JavaScript can modify these styles in real time.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Definiendo_una_Animacion_con_CSS\"><\/span>Defining an Animation with CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Animations in CSS can be created using two main approaches: transitions and key animations.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">\/* Simple transition *\/ .element { transition: all 0.5s ease; } .element:hover { transform: scale(1.1); } \/* Key animation *\/ @keyframes animateBackground { from { background-color: red; } to { background-color: yellow; } } .element { animation: animateBackground 2s infinite; }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Manipulando_CSS_con_JavaScript\"><\/span>Manipulating CSS with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript can manipulate these styles by altering classes or directly changing individual styles.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.querySelector(&#039;.item&#039;).classList.add(&#039;new-class&#039;); document.querySelector(&#039;.element&#039;).style.transform = &#039;rotate(45deg)&#039;;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Controlando_Animaciones_con_JavaScript\"><\/span>Controlling Animations with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Iniciar_una_Animacion_en_Respuesta_a_un_Evento\"><\/span>Start an Animation in Response to an Event<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One of the most common uses of JavaScript is to trigger animations in response to user events such as clicks or scrolls.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const button = document.querySelector(&#039;#startbutton&#039;); button.addEventListener(&#039;click&#039;, function() { const element = document.querySelector(&#039;.element&#039;); element.classList.add(&#039;animate&#039;); });<\/code><\/pre>\n<p>In this example, the class <code>.encourage<\/code> could be defined in CSS with any type of animation.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Pausa_y_Reanudacion_de_Animaciones\"><\/span>Pause and Resume Animations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript can also be used to pause and resume CSS animations, especially useful in complex interactive situations.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let animationOnPause = false; function toggleAnimation() { const element = document.querySelector(&#039;.element&#039;); if (!animationOnPause) { element.style.animationPlayState = &#039;paused&#039;; animationOnPause = true; } else { element.style.animationPlayState = &#039;running&#039;; animationOnPause = false; } } document.querySelector(&#039;#pausebutton&#039;).addEventListener(&#039;click&#039;, toggleAnimation);<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Cambiando_Propiedades_de_Animacion_Dinamicamente\"><\/span>Changing Animation Properties Dynamically<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Modifying the properties of an animation in real time allows you to create dynamic effects that respond to user interactions or other events in the application.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">window.addEventListener(&#039;scroll&#039;, function() { const height = window.pageYOffset; const element = document.querySelector(&#039;.element&#039;); element.style.opacity = 1 - height \/ 1000; });<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Consideraciones_de_Rendimiento\"><\/span>Performance Considerations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although JavaScript offers great control over CSS animations, it is also important to consider performance. Frequent manipulations of the DOM or styling properties can lead to reductions in animation fluidity and user experience. Use tools like <code>requestAnimationFrame<\/code> can help mitigate some of these problems.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Controlling CSS animations with JavaScript opens a new world of possibilities for complex interactions and personalized user experiences. As you explore these techniques, it&#039;s always good to remember that less is more. Focusing on smooth, meaningful animations often provides the best user experience.<\/p>\n<p>To learn more about advanced techniques and best practices, feel free to visit my site <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> And if you have any questions or need personalized advice, <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact me<\/a>. Explore, experiment and, above all, have fun creating impressive animations.<\/p>","protected":false},"excerpt":{"rendered":"<p>Modern web development is all about creating interactive and enjoyable experiences for users. One of the most powerful tools to achieve this is the combination of CSS and JavaScript, especially in the field of animations. The ability to manipulate CSS animations with JavaScript not only enriches interactivity but also [\u2026]<\/p>","protected":false},"author":1,"featured_media":28869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[684,205,500,90,1988,519,2205,358,185,1008],"class_list":["post-28868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-animaciones","tag-blog","tag-completa","tag-con","tag-controlando","tag-css","tag-frontend","tag-guia","tag-javascript","tag-pruebas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28868","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=28868"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28868\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28869"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}