{"id":1060,"date":"2026-06-02T11:52:27","date_gmt":"2026-06-02T11:52:27","guid":{"rendered":"https:\/\/www.gloobs.com\/blog\/?p=1060"},"modified":"2026-06-09T14:52:00","modified_gmt":"2026-06-09T14:52:00","slug":"animaciones-css-nativas-sin-js-hasta-donde-puedes-llegar-solo-con-css","status":"publish","type":"post","link":"https:\/\/www.gloobs.com\/blog\/animaciones-css-nativas-sin-js-hasta-donde-puedes-llegar-solo-con-css\/","title":{"rendered":"Animaciones CSS nativas (sin JS): hasta d\u00f3nde puedes llegar solo con CSS"},"content":{"rendered":"
\n
\n

Animaciones CSS nativas (sin JS): hasta d\u00f3nde puedes llegar solo con CSS<\/h1>\n

No siempre necesitas JavaScript para animar una interfaz. Con las animaciones nativas de CSS puedes resolver la mayor\u00eda de transiciones, hovers y efectos de scroll ligeros con menos c\u00f3digo, mejor rendimiento y menos bugs. Y si necesitas un ejemplo real, tienes uno justo en el hero de mi portfolio<\/a>.<\/p>\n<\/header>\n

\n

Qu\u00e9 entendemos por animaciones CSS nativas<\/h2>\n

Cuando hablamos de animaciones CSS nativas nos referimos a todo lo que puedes hacer usando \u00fanicamente propiedades de CSS como de \u00abtransition\u00bb y de \u00abanimation\u00bb, junto con de \u00ab@keyframes\u00bb y las nuevas APIs de animaci\u00f3n ligadas al scroll o al estado del usuario, sin escribir una sola l\u00ednea de JavaScript.<\/p>\n

El navegador se encarga de calcular y ejecutar los frames de la animaci\u00f3n, y t\u00fa solo describes los estados iniciales y finales. Esto reduce complejidad, evita tener que orquestar timelines en JS y suele producir un rendimiento m\u00e1s predecible en la mayor\u00eda de casos de UI.<\/p>\n<\/section>\n

\n

Transiciones CSS: el nivel 1 de la animaci\u00f3n nativa<\/h2>\n

Las transiciones son la forma m\u00e1s simple y limpia de animar algo en CSS. En lugar de definir toda una secuencia de keyframes, le dices al navegador que cada vez que cambie una propiedad, la anime en un tiempo determinado con una curva de easing concreta.<\/p>\n

\n
.button {\r\n  background-color: #111827;\r\n  color: white;\r\n  transform: translateY(0);\r\n  transition:\r\n    background-color .18s ease-out,\r\n    transform .18s ease-out,\r\n    box-shadow .18s ease-out;\r\n}\r\n.button:hover {\r\n  background-color: #0f766e;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 16px rgba(15, 118, 110, .25);\r\n}<\/pre>\n<\/div>\n
Lo interesante de las transiciones es que no piensas en animaciones, piensas en estados. Cada vez que cambias de clase, pseudoestado o media query, el navegador interpola de uno a otro sin que tengas que montar l\u00f3gica adicional.<\/p>\n<\/section>\n
\n
Animaciones con @keyframes: cuando necesitas m\u00e1s control<\/h2>\n
Cuando ya no basta con animar de A a B, entran en juego los de \u00ab@keyframes\u00bb. Aqu\u00ed defines una secuencia de estados intermedios y la aplicas con propiedades como de \u00abanimation-name\u00bb, de \u00abanimation-duration\u00bb o de \u00abanimation-iteration-count\u00bb.<\/p>\n
\n
@keyframes fade-in-up {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(16px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }}\r\n.card {\r\n  opacity: 0;\r\n  animation: fade-in-up .4s ease-out forwards;\r\n}<\/pre>\n<\/div>\n
El patr\u00f3n t\u00edpico es aplicar la animaci\u00f3n a determinados elementos cuando se a\u00f1aden al DOM o cuando reciben una clase espec\u00edfica. En muchos casos esa clase ya te la pone el propio framework o el builder al abrir un modal o mostrar un dropdown.<\/p>\n<\/section>\n
\n
Un ejemplo real: el hero de gloobs.com<\/h2>\n
El hero de gloobs.com<\/a> es un buen caso pr\u00e1ctico de hasta d\u00f3nde puede llegar CSS puro cuando se usa con intenci\u00f3n. La escena es un entorno urbano ilustrado con SVGs en capas, y cada elemento tiene su propia l\u00f3gica de movimiento, sin una sola l\u00ednea de JavaScript.<\/p>\n
La estructura es sencilla: un contenedor con de>position: relative y de>overflow: hidden, y dentro todos los SVGs posicionados en absoluto, cada uno con su propia animaci\u00f3n. El resultado es una escena viva y org\u00e1nica que el navegador renderiza de forma completamente nativa.<\/p>\n
Nubes animadas<\/h3>\n
Las nubes cambian su opacidad de forma continua con una animaci\u00f3n en loop infinito.<\/p>\n
\n
.nubes {position: absolute; z-index: 2; opacity: 50%;\r\nanimation-name: anima-nubes;\r\n    animation-duration: 3s;\r\n    animation-timing-function: ease-in-out;\r\n    animation-iteration-count: infinite; \r\n}<\/pre>\n
@keyframes anima-nubes { 0% { opacity: 80$; } 50%{ opacity: 100%; } }<\/pre>\n<\/div>\n
Edificios que salen del suelo<\/h3>\n
Los edificios del fondo aparecen por separado desde el suelo hasta su posici\u00f3n final.<\/p>\n
\n
.edificio1 {position: absolute; z-index: 3;\r\nanimation-name: anima-edificio1;\r\n    animation-duration: 2s;\r\n    animation-timing-function: ease-in-out;\r\n    animation-iteration-count: 1; \/*----cu\u00c3\u00a1ntas veces quiero que se produzca la animaci\u00c3\u00b3n *\/\r\n}<\/pre>\n
@keyframes  anima-edificio1 {\r\n    from {\r\n      transform: translateY(200px);\r\n    }\r\n    to {\r\n      transform: translateY(0px);\r\n    }}<\/pre>\n<\/div>\n
Por qu\u00e9 funciona esta escena sin JS<\/h3>\n
La clave est\u00e1 en que cada SVG es una capa independiente con posicionamiento absoluto dentro de un contenedor relativo. Cada elemento tiene su propio ritmo y su propio retraso, y el resultado es una escena que se siente viva sin que haya ning\u00fan script orquest\u00e1ndola. CSS gestiona todo el ciclo de animaci\u00f3n y el navegador se encarga del renderizado de forma nativa.<\/p>\n
Es tambi\u00e9n un ejemplo de c\u00f3mo los SVGs son el formato ideal para este tipo de heroes animados: escalan sin p\u00e9rdida de calidad, se pueden animar por capas desde CSS y tienen un peso muy inferior al de una imagen equivalente en PNG o un v\u00eddeo.<\/p>\n<\/section>\n
\n
Scroll-driven animations: animar al hacer scroll sin JS<\/h2>\n
Durante a\u00f1os, si quer\u00edas animar al hacer scroll necesitabas JavaScript. Ahora CSS incorpora de>animation-timeline: view(), que permite sincronizar la animaci\u00f3n con la posici\u00f3n del elemento en la ventana, sin escuchar eventos ni a\u00f1adir clases desde un script.<\/p>\n
\n
@keyframes fade-in-on-scroll {\r\n  0% {\r\n    transform: translateY(32px);\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n  }}\r\n.fade-in-on-scroll {\r\n  animation: fade-in-on-scroll linear forwards;\r\n  animation-timeline: view();\r\n  animation-range: entry;\r\n}<\/pre>\n<\/div>\n
El soporte en navegadores modernos es bueno pero todav\u00eda no universal, as\u00ed que conviene envolverlo en de>@supports para hacer progressive enhancement y dejar un fallback est\u00e1tico razonable.<\/p>\n
\n
@supports (animation-timeline: view()) {\r\n  .fade-in-on-scroll {\r\n    animation-timeline: view();\r\n    animation-range: entry;\r\n  }\r\n}<\/pre>\n<\/div>\n
Si quieres profundizar en esta API, la documentaci\u00f3n de MDN sobre animation-timeline<\/a> y los ejemplos de scroll-driven-animations.style<\/a> son los mejores puntos de partida.<\/p>\n<\/section>\n
\n
Buenas pr\u00e1cticas de rendimiento<\/h2>\n
Una animaci\u00f3n nativa no es autom\u00e1ticamente r\u00e1pida. La regla de oro es animar solo propiedades que pasen por el compositor de la GPU: principalmente de>transform y de>opacity.<\/p>\n