{"id":25134,"date":"2024-03-15T00:38:35","date_gmt":"2024-03-14T23:38:35","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/danza-de-pixeles-dominando-las-animaciones-con-keyframes-en-css\/"},"modified":"2024-06-03T17:39:32","modified_gmt":"2024-06-03T16:39:32","slug":"danza-de-pixeles-dominando-las-animaciones-con-keyframes-en-css","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/pixel-dance-dominating-animations-with-keyframes-in-css\/","title":{"rendered":"Pixel Dance: Mastering Animations with CSS Keyframes"},"content":{"rendered":"<p>The magic of CSS animations with keyframes is that they allow you to bring your web design to life in a simple, yet powerful way. Have you wanted your elements on screen to perform perfectly synchronized choreography? Well, prepare your developer tools because we are going to immerse ourselves in the world of animation sequences using CSS keyframes.<\/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\/pixel-dance-dominating-animations-with-keyframes-in-css\/#La_Base_de_Nuestras_Animaciones_Entendiendo_Keyframes\" >The Basis of Our Animations: Understanding Keyframes<\/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\/pixel-dance-dominating-animations-with-keyframes-in-css\/#Sacando_el_Maximo_Partido_a_los_Porcentajes\" >Making the Most of Percentages<\/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\/pixel-dance-dominating-animations-with-keyframes-in-css\/#Conectar_Animacion_y_Elemento_La_Propiedad_Animation\" >Connect Animation and Element: The Animation Property<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/pixel-dance-dominating-animations-with-keyframes-in-css\/#Coreografia_en_CSS_Secuenciando_Multiples_Animaciones\" >Choreography in CSS: Sequencing Multiple Animations<\/a><\/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\/pixel-dance-dominating-animations-with-keyframes-in-css\/#Paso_a_Paso_Creando_una_Animacion_Compleja\" >Step by Step: Creating a Complex Animation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/pixel-dance-dominating-animations-with-keyframes-in-css\/#Sincronizando_Secuencias_Jugando_con_Delays_y_Timing\" >Synchronizing Sequences: Playing with Delays and Timing<\/a><\/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\/pixel-dance-dominating-animations-with-keyframes-in-css\/#Practicas_Avanzadas_Animation_y_Performance\" >Advanced Practices: Animation and Performance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/pixel-dance-dominating-animations-with-keyframes-in-css\/#Conclusion_y_Continuidad_del_Aprendizaje\" >Conclusion and Continuity of Learning<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"La_Base_de_Nuestras_Animaciones_Entendiendo_Keyframes\"><\/span>The Basis of Our Animations: Understanding Keyframes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>He <code>@keyframes<\/code> is a CSS rule that allows you to create animation steps indicating the style that the HTML elements will have at different points in the animation. They are like frames in a movie, where you can define how and when the properties of an element change.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes example { from { opacity: 0; } to { opacity: 1; } }<\/code><\/pre>\n<p>In the above case, the element will start completely transparent (<code>opacity: 0<\/code>) and will end up being fully visible (<code>opacity: 1<\/code>).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sacando_el_Maximo_Partido_a_los_Porcentajes\"><\/span>Making the Most of Percentages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Keyframes don&#039;t have to be limited to an initial state and an end state. You can define the behavior of the element at any point in between using percentages.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes exampleComplex { 0% { transform: translateY(0px); background-color: blue; } 50% { transform: translateY(-100px); background-color: red; } 100% { transform: translateY(0px); background-color: blue; } }<\/code><\/pre>\n<p>Here, the element will move up halfway and return to its original position, changing its background color throughout the animation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conectar_Animacion_y_Elemento_La_Propiedad_Animation\"><\/span>Connect Animation and Element: The Animation Property<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With the animation sequence defined, you need to link it to an HTML element. This is done with the property <code>animation<\/code>. Here you can set the duration, delay, repeat times, direction, and other aspects of the animation.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { animation: complexexample 2s ease-in-out 0s 1 normal forwards; }<\/code><\/pre>\n<p>In this example, the animation <code>exampleComplex<\/code> will be applied to the element with class <code>.element<\/code> for 2 seconds, with a gentle rhythm at the beginning and end (<code>ease-in-out<\/code>). There will be no delay (<code>0s<\/code>), will play once (<code>1<\/code>) and will keep the style of the last keyframe after finishing (<code>forwards<\/code>).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Coreografia_en_CSS_Secuenciando_Multiples_Animaciones\"><\/span>Choreography in CSS: Sequencing Multiple Animations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS allows multiple animations to be applied to a single element, simply separating them with commas in the property <code>animation<\/code>. <\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { animation: dance 3s, color 2s; }<\/code><\/pre>\n<p>Here the element <code>.element<\/code> will run the animation <code>dance<\/code> for 3 seconds and simultaneously it will change color with the animation <code>color<\/code> for 2 seconds. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Paso_a_Paso_Creando_una_Animacion_Compleja\"><\/span>Step by Step: Creating a Complex Animation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We are going to develop a composite animation where an element moves, resizes and rotates.<\/p>\n<ol>\n<li>Defines scroll keyframes:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes move { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }<\/code><\/pre>\n<ol start=\"&quot;2&quot;\">\n<li>Define the scaling keyframes:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes scalar { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }<\/code><\/pre>\n<ol start=\"&quot;3&quot;\">\n<li>Defines the rotation keyframes:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }<\/code><\/pre>\n<ol start=\"&quot;4&quot;\">\n<li>Apply the animations to the desired element:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-css&quot;\">.element { animation: move 4s linear, scale 8s ease-in-out, rotate 6s infinite; }<\/code><\/pre>\n<p>The element now moves 300px to the right in 4 seconds, while growing a 50% and shrinking back to its original size in 8 seconds and rotates infinitely every 6 seconds.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sincronizando_Secuencias_Jugando_con_Delays_y_Timing\"><\/span>Synchronizing Sequences: Playing with Delays and Timing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get the animations to run in sequence and not all at once, you can play with the delay values (<code>animation-delay<\/code>) and durations.<\/p>\n<p>Imagine an opacity animation that you want to start after the element has been moved:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes opacity { from { opacity: 0; } to { opacity: 1; } } .element { animation: move 4s linear, opacity 2s linear 4s; }<\/code><\/pre>\n<p>In this situation, the opacity animation will start right after the motion animation ends.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Practicas_Avanzadas_Animation_y_Performance\"><\/span>Advanced Practices: Animation and Performance<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>An important aspect when working with animations is to consider performance in the browser. Complex animations can slow down some devices. To improve performance, use the property <code>will-change<\/code> to inform the browser which properties are likely to change.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { will-change: transform, opacity; animation: exampleComplex 2s ease-in-out; }<\/code><\/pre>\n<p>With <code>will-change<\/code>, you allow the browser to prepare the resources needed for the animation, which can improve performance by reducing the computation time required when the animation is running.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion_y_Continuidad_del_Aprendizaje\"><\/span>Conclusion and Continuity of Learning<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Experimenting with animations can add interactivity and visual appeal to your projects. I encourage you to take these concepts as a starting point and extend them with your own creative style. Visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> to find even more resources and tricks on web development, and if you have any questions or want to share your own animations, feel free to contact me at <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">NelkoDev Contact<\/a>.<\/p>\n<p>CSS animations with keyframes have enormous potential, and you have just torn the veil that hides it. What are you waiting for? Start practicing and transform your interfaces with impressive animation sequences. Your imagination is the only limit!<\/p>","protected":false},"excerpt":{"rendered":"<p>La magia de las animaciones CSS con keyframes es que te permiten dar vida a tu dise\u00f1o web de manera simple, pero poderosa. \u00bfHas querido que tus elementos en pantalla realicen una coreograf\u00eda perfectamente sincronizada? Pues bien, prepara tus herramientas de desarrollador porque vamos a sumergirnos en el mundo de las secuencias de animaciones utilizando [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[684,205,90,519,1724,1289,887,48,1723],"class_list":["post-25134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-animaciones","tag-blog","tag-con","tag-css","tag-danza","tag-dominando","tag-keyframes","tag-las","tag-pixeles"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25134","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=25134"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25134\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25135"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}