{"id":25261,"date":"2024-01-09T05:29:12","date_gmt":"2024-01-09T04:29:12","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-las-animaciones-css-con-transform-y-translate\/"},"modified":"2024-06-03T17:40:16","modified_gmt":"2024-06-03T16:40:16","slug":"domina-las-animaciones-css-con-transform-y-translate","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/","title":{"rendered":"Master CSS Animations with Transform and Translate"},"content":{"rendered":"<p>Creating animations on the web may seem like a task only within the reach of experts, but with basic knowledge of CSS and using properties such as <code>transformation<\/code> y <code>translate<\/code>, you can bring your HTML elements to life easily and with impressive results. The key is to understand these tools and know how to apply them to manipulate elements as you wish. In this article we are going to explore the world of transformations and translations, diving into practical examples that will help you understand and apply these techniques in your own projects.<\/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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/#Entendiendo_el_Poder_de_transform\" >Understanding the Power of transform<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/#Rotar_con_rotate\" >Rotate with rotate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/#Escalar_con_scale\" >Scale with scale<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/#Sesgar_con_skew\" >Skew<\/a><\/li><\/ul><\/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\/master-css-animations-with-transform-and-translate\/#La_Magia_de_translate\" >The Magic of translate<\/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\/master-css-animations-with-transform-and-translate\/#Animando_con_transition\" >Animating with transition<\/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\/master-css-animations-with-transform-and-translate\/#Animaciones_mas_Complejas_con_keyframes\" >More Complex Animations with @keyframes<\/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\/master-css-animations-with-transform-and-translate\/#Ejemplo_Practico_Creando_una_Animacion_de_Deslizamiento\" >Practical Example: Creating a Slide Animation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/#Trabajar_con_Propiedades_3D\" >Working with 3D Properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/#Pro_Tips_para_Optimizar_tus_Animaciones\" >Pro Tips to Optimize your Animations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-css-animations-with-transform-and-translate\/#Conclusion_La_Practica_Hace_la_Maestria\" >Conclusion: Practice Makes Mastery<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Entendiendo_el_Poder_de_transform\"><\/span>Understanding the Power of <code>transformation<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The property <code>transformation<\/code> CSS is incredibly powerful and versatile. It allows you to rotate, scale, skew and move elements without disturbing the normal flow of documents. This is what makes it perfect for animations, since you can change its appearance and position visually, without affecting other elements on the page.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Rotar_con_rotate\"><\/span>Rotate with <code>rotate<\/code><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Imagine that you want an element to rotate on its own axis; for this we use <code>rotate<\/code>:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { transform: rotate(45deg); }<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Escalar_con_scale\"><\/span>Climb with <code>scale<\/code><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>If what you are looking for is to change the size of an element, either increase or decrease it, <code>scale<\/code> is your ally:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { transform: scale(1.5); \/* Increase the size by 50% *\/ }<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Sesgar_con_skew\"><\/span>Skew with <code>skew<\/code><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To add a tilt or distortion effect, <code>skew<\/code> modifies the geometry of the element:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { transform: skew(30deg); }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"La_Magia_de_translate\"><\/span>The Magic of <code>translate<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>Translate<\/code> is a function of <code>transformation<\/code> which allows you to move elements in 2D or 3D space. For example, to move an element 100 pixels to the right and 50 pixels down, you would do the following:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { transform: translate(100px, 50px); }<\/code><\/pre>\n<p>This is particularly useful for creating impressions of motion and animating elements in specific directions.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Animando_con_transition\"><\/span>Cheering with <code>transition<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now that you know how to move and reshape elements, it&#039;s time to bring them to life with <code>transition<\/code>. This property allows you to define the duration and effect with which the transformations will be applied.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { transition: transform 0.5s ease-in-out; }<\/code><\/pre>\n<p>By combining <code>transition<\/code> with events like <code>:hover<\/code>, you can create interactive hover effects with just a few lines of code:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element:hover { transform: translate(100px, 50px) rotate(20deg); }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Animaciones_mas_Complejas_con_keyframes\"><\/span>More Complex Animations with <code>@keyframes<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For more detailed animations, CSS offers us <code>@keyframes<\/code>, which allows defining intermediate states of the animation.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">@keyframes myAnimation { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } .element { animation: myAnimation 2s infinite; }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_Practico_Creando_una_Animacion_de_Deslizamiento\"><\/span>Practical Example: Creating a Slide Animation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Let&#039;s create a swipe animation that you can use, for example, to highlight a call-to-action on your website.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;div class=&quot;deslizador&quot;&gt;\n  Slide me!\n&lt;\/div&gt;<\/code><\/pre>\n<pre><code class=\"&quot;language-css&quot;\">.slider { transition: transform 0.3s ease; cursor: pointer; } .slider:hover { transform: translateX(10px); }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Trabajar_con_Propiedades_3D\"><\/span>Working with 3D Properties<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To take your animations to another dimension, we can involve the Z axis. <code>translateZ<\/code> y <code>perspective<\/code> are your tools for this:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element { transform: translateZ(50px); transform-style: preserve-3d; } .container { perspective: 600px; }<\/code><\/pre>\n<p>With these properties, elements can appear to move closer or further away from the user, creating a three-dimensional effect.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Pro_Tips_para_Optimizar_tus_Animaciones\"><\/span>Pro Tips to Optimize your Animations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Use of <code>will-change<\/code><\/strong>: This property informs the browser of potential changes, optimizing animation performance.<\/li>\n<\/ul>\n<pre><code class=\"&quot;language-css&quot;\">.element { will-change: transform; }<\/code><\/pre>\n<ul>\n<li><strong>Avoid expensive layouts<\/strong>: Animate properties like <code>width<\/code>, <code>height<\/code>, either <code>margin<\/code> may cause unnecessary reflows or repaints. Preferably encourage <code>transformation<\/code> y <code>opacity<\/code>.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion_La_Practica_Hace_la_Maestria\"><\/span>Conclusion: Practice Makes Mastery<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Experimentation and practice are key when working with animations and movements in CSS. I encourage you to visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> regularly for more tips and examples to help you become a master of web animation.<\/p>\n<p>If you have any questions about how to apply these techniques to your projects, feel free to reach me at <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">Contact NelkoDev<\/a>. Together we can bring your ideas to life!<\/p>","protected":false},"excerpt":{"rendered":"<p>Crear animaciones en la web puede parecer una tarea s\u00f3lo al alcance de expertos, pero con conocimientos b\u00e1sicos de CSS y utilizando propiedades como transform y translate, puedes dar vida a tus elementos HTML de forma sencilla y con resultados impresionantes. La clave est\u00e1 en entender estas herramientas y saber c\u00f3mo aplicarlas para manipular elementos [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25262,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[684,205,90,519,1473,48,678,677],"class_list":["post-25261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-animaciones","tag-blog","tag-con","tag-css","tag-domina","tag-las","tag-transform","tag-translate"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25261","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=25261"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25261\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25262"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}