{"id":25220,"date":"2024-01-11T08:42:28","date_gmt":"2024-01-11T07:42:28","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/animacion-avanzada-con-css-domina-keyframes\/"},"modified":"2024-06-03T17:40:00","modified_gmt":"2024-06-03T16:40:00","slug":"animacion-avanzada-con-css-domina-keyframes","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/advanced-animation-with-css-master-keyframes\/","title":{"rendered":"Advanced Animation with CSS: Master Keyframes"},"content":{"rendered":"<p>In the vast world of web design, animations have become a crucial element in creating dynamic and engaging experiences. Using CSS and its powerful set of tools, you can design sophisticated animation sequences that capture your users&#039; attention and enrich the interactivity of your projects. Today, we&#039;re going to dive into the art of creating keyframe animation sequences, a technique that will allow you to breathe life and movement into your designs.<\/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\/advanced-animation-with-css-master-keyframes\/#Iniciando_con_Keyframes\" >Getting started with 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\/advanced-animation-with-css-master-keyframes\/#Estructuras_de_Secuencia_en_Detalle\" >Sequence Structures in Detail<\/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\/advanced-animation-with-css-master-keyframes\/#Concatenando_Animaciones_con_Creatividad\" >Concatenating Animations with Creativity<\/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\/advanced-animation-with-css-master-keyframes\/#Jugando_con_Timing_Functions\" >Playing with Timing Functions<\/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\/advanced-animation-with-css-master-keyframes\/#Ejemplos_Inspiradores\" >Inspiring Examples<\/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\/advanced-animation-with-css-master-keyframes\/#Consejos_y_Mejores_Practicas\" >Tips and Best Practices<\/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\/advanced-animation-with-css-master-keyframes\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Iniciando_con_Keyframes\"><\/span>Getting started with Keyframes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we dive into the sea of complex animations, let&#039;s quickly review what keyframes are. Imagine that you want to tell a story with images through a precise sequence of changes; that&#039;s exactly what keyframes allow you to do in CSS. They are the control points in your animation that define how and when an element&#039;s style changes occur.<\/p>\n<p>To create an animation with keyframes, you need to specify two things: the percentage of time in which the changes will occur (the keyframes themselves) and the CSS property or properties that will change at those times. Here is a basic skeleton of what this looks like in CSS:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes MyAnimationName { 0% { \/* Initial style of element *\/ } 100% { \/* Final style of element *\/ } }<\/code><\/pre>\n<p>With just two points you can make a simple transition, but what if you want more complexity? You simply add more keyframes at the percentage you want and voil\u00e0! You are on your way to creating a detailed animation sequence.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Estructuras_de_Secuencia_en_Detalle\"><\/span>Sequence Structures in Detail<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now let&#039;s delve into creating more elaborate animation sequences. Imagine you want an element to move from left to right and then change color, all in a smooth, coordinated sequence.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes movementYColor { 0% { left: 0; background-color: blue; } 50% { left: 50px; background-color: red; } 100% { left: 100px; background-color: yellow; } }<\/code><\/pre>\n<p>Then, you bind the animation to an HTML element like this:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.my-item { animation: motionAndColor 3s infinite; }<\/code><\/pre>\n<p>With this example, the element will move and change color in an endless loop every 3 seconds.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Concatenando_Animaciones_con_Creatividad\"><\/span>Concatenating Animations with Creativity<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>But what if you want different animations to follow one after another? This is where your creativity can rise to new levels. CSS allows you to concatenate multiple animations into one element, giving you the freedom to create complex, dynamic sequences.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.my-element { animation: animationOne 5s, animationTwo 2s 5s; }<\/code><\/pre>\n<p>The element will first execute <code>animationOne<\/code> for 5 seconds and then <code>animationTwo<\/code> It will start immediately after, lasting another 2 seconds. The trick is in the times and delays you assign.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Jugando_con_Timing_Functions\"><\/span>Playing with Timing Functions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The way your animations speed up or slow down is crucial for a natural and enjoyable animation. Use <code>timing functions<\/code> to control the speed during the animation. The options are several, from <code>linear<\/code> until <code>ease-in-out<\/code>, not to mention the cubic Bezier functions that you can customize.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.my-item { animation-timing-function: ease-in-out; }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplos_Inspiradores\"><\/span>Inspiring Examples<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Are you lacking ideas? Think of an animation of a car accelerating and braking, a flower blooming, or a series of items falling like dominoes. The sky is the limit and the tools are in your hands. Dare to explore and experiment!<\/p>\n<p>Always remember to use your animations sparingly to avoid overloading users with too much movement. The key is finding that perfect balance between function and beauty.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Consejos_y_Mejores_Practicas\"><\/span>Tips and Best Practices<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When working with animation sequences, there are several points you should consider:<\/p>\n<ul>\n<li><strong>Performance<\/strong>: Animations can be expensive in terms of performance. Optimize your animations by avoiding render-intensive changes, such as the property <code>box-shadow<\/code>.<\/li>\n<li><strong>Accessibility<\/strong>: Take into account users with special needs. Provides a way to pause or turn off intense animations.<\/li>\n<li><strong>Compatibility<\/strong>: Although keyframe animation is widely supported in modern browsers, check compatibility in the ones your audience uses the most.<\/li>\n<\/ul>\n<p>To learn more about how to optimize and create impactful animations, visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> where you&#039;ll find tutorials, tips and tricks that will take your animation skills to the next level.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Creating animations with CSS and keyframes takes your web projects from static to magical. It is a skill that, once mastered, distinguishes you as a creative web designer in tune with the most current techniques. If you&#039;ve never played with animations before, I encourage you to start today.<\/p>\n<p>If you have questions or want to share your creations, do not hesitate to get in touch through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">https:\/\/nelkodev.com\/contacto<\/a>. I&#039;d love to see what animation sequences you&#039;ve brought to life with the tools CSS provides you.<\/p>\n<p>The art of animation is constantly evolving, so stay curious, practice, and keep learning. Happy animation!<\/p>","protected":false},"excerpt":{"rendered":"<p>En el vasto mundo del dise\u00f1o web, las animaciones se han convertido en un elemento crucial para crear experiencias din\u00e1micas y atractivas. Utilizando CSS y su poderoso conjunto de herramientas, puedes dise\u00f1ar secuencias de animaciones sofisticadas que capten la atenci\u00f3n de tus usuarios y enriquezcan la interactividad de tus proyectos. Hoy, vamos a sumergirnos en [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25221,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[1603,1679,205,90,519,1473,887],"class_list":["post-25220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-animacion","tag-avanzada","tag-blog","tag-con","tag-css","tag-domina","tag-keyframes"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25220","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=25220"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25220\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25221"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}