{"id":19394,"date":"2026-06-07T07:00:00","date_gmt":"2026-06-07T05:00:00","guid":{"rendered":"https:\/\/martagonzalez.dev\/wp\/blog\/\/"},"modified":"2026-06-09T18:53:45","modified_gmt":"2026-06-09T16:53:45","slug":"como-funciona-keyframes-en-css-explicado-facil","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/como-funciona-keyframes-en-css-explicado-facil\/","title":{"rendered":"C\u00f3mo funciona @keyframes en CSS explicado f\u00e1cil"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"\"<\/figure>\n\n\n\n

Las animaciones en CSS pueden parecer un detalle peque\u00f1o dentro de una interfaz, pero cuando est\u00e1n bien planteadas ayudan a que una web se sienta m\u00e1s fluida, clara y cuidada. Un bot\u00f3n que aparece suavemente, una tarjeta que entra en pantalla, un loader que gira mientras carga el contenido o un icono que llama la atenci\u00f3n sin resultar molesto tienen algo en com\u00fan: muchas veces est\u00e1n creados con @keyframes en CSS<\/strong>.<\/p>\n\n\n\n

La regla @keyframes<\/code> permite definir una animaci\u00f3n paso a paso. Es decir, le indica al navegador c\u00f3mo debe cambiar un elemento desde un estado inicial hasta un estado final, pasando por todos los puntos intermedios que queramos controlar.<\/p>\n\n\n\n

Si ya has trabajado con transiciones o est\u00e1s empezando a explorar el movimiento en interfaces, este concepto es clave para entender mejor las animaciones CSS<\/a> y aplicarlas con criterio en tus proyectos.<\/p>\n\n\n\n

En este art\u00edculo vamos a ver c\u00f3mo funciona @keyframes en CSS<\/strong>, cu\u00e1l es su sintaxis, qu\u00e9 propiedades intervienen, cu\u00e1ndo conviene usarlo y qu\u00e9 buenas pr\u00e1cticas deber\u00edas tener en cuenta para crear animaciones \u00fatiles, accesibles y f\u00e1ciles de mantener.<\/p>\n\n\n\n

Qu\u00e9 es @keyframes en CSS<\/h2>\n\n\n\n

@keyframes<\/code> es una regla de CSS que se utiliza para definir los distintos estados de una animaci\u00f3n. Su funci\u00f3n principal es describir c\u00f3mo cambia un elemento a lo largo del tiempo.<\/p>\n\n\n\n

Dicho de forma sencilla, @keyframes CSS marca los pasos de una animaci\u00f3n<\/strong>.<\/p>\n\n\n\n

Por ejemplo, podemos hacer que un elemento pase de estar invisible a visible, que se desplace de izquierda a derecha, que cambie de tama\u00f1o, que rote, que parpadee o que combine varias transformaciones a la vez.<\/p>\n\n\n\n

La estructura b\u00e1sica es esta:<\/p>\n\n\n\n

@keyframes nombreAnimacion {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n<\/code><\/pre>\n\n\n\n
En este caso, la animaci\u00f3n empieza con una opacidad de 0<\/code>, por lo que el elemento no se ve. Despu\u00e9s termina con una opacidad de 1<\/code>, de modo que aparece completamente visible.<\/p>\n\n\n\n
Pero definir el @keyframes<\/code> no es suficiente. Para que la animaci\u00f3n se aplique a un elemento, necesitamos usar la propiedad animation<\/code>.<\/p>\n\n\n\n
.caja {\n  animation: nombreAnimacion 1s ease-in-out;\n}\n<\/code><\/pre>\n\n\n\n
Aqu\u00ed estamos indicando que el elemento con clase .caja<\/code> debe usar la animaci\u00f3n llamada nombreAnimacion<\/code>, que tendr\u00e1 una duraci\u00f3n de 1s<\/code> y una curva de movimiento ease-in-out<\/code>.<\/p>\n\n\n\n
C\u00f3mo funciona @keyframes paso a paso<\/h2>\n\n\n\n
Para entender bien las animaciones con keyframes<\/strong>, conviene separar el proceso en dos partes: primero se define la animaci\u00f3n y despu\u00e9s se aplica al elemento.<\/p>\n\n\n\n
1. Definir la animaci\u00f3n con @keyframes<\/h3>\n\n\n\n
La regla @keyframes<\/code> funciona como una especie de guion. Dentro de ella escribimos qu\u00e9 cambios queremos que ocurran durante la animaci\u00f3n.<\/p>\n\n\n\n
Podemos usar from<\/code> y to<\/code> cuando solo necesitamos indicar un punto inicial y un punto final.<\/p>\n\n\n\n
@keyframes aparecer {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n<\/code><\/pre>\n\n\n\n
Este ejemplo es muy com\u00fan para crear un efecto de aparici\u00f3n suave.<\/p>\n\n\n\n
Tambi\u00e9n podemos escribirlo con porcentajes:<\/p>\n\n\n\n
@keyframes aparecer {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n<\/code><\/pre>\n\n\n\n
Ambas versiones hacen lo mismo. from<\/code> equivale a 0%<\/code> y to<\/code> equivale a 100%<\/code>.<\/p>\n\n\n\n
La ventaja de usar porcentajes es que podemos a\u00f1adir pasos intermedios. Por ejemplo, podemos hacer que un elemento no solo aparezca, sino que tambi\u00e9n se mueva, crezca o rebote durante el proceso.<\/p>\n\n\n\n
2. Aplicar la animaci\u00f3n con animation<\/h3>\n\n\n\n
Una vez definida la animaci\u00f3n, necesitamos aplicarla a un selector CSS.<\/p>\n\n\n\n
.elemento {\n  animation-name: aparecer;\n  animation-duration: 1s;\n  animation-timing-function: ease;\n}\n<\/code><\/pre>\n\n\n\n
Tambi\u00e9n podemos escribirlo de forma abreviada:<\/p>\n\n\n\n
.elemento {\n  animation: aparecer 1s ease;\n}\n<\/code><\/pre>\n\n\n\n
La propiedad animation<\/code> es un shorthand, es decir, una forma resumida de escribir varias propiedades relacionadas con la animaci\u00f3n.<\/p>\n\n\n\n
Esta separaci\u00f3n es importante: @keyframes<\/code> define qu\u00e9 ocurre, mientras que animation<\/code> define c\u00f3mo se ejecuta.<\/p>\n\n\n\n
Propiedades principales de CSS animation keyframes<\/h2>\n\n\n\n
Para trabajar correctamente con CSS animation keyframes<\/strong>, no basta con conocer @keyframes<\/code>. Tambi\u00e9n es importante entender las propiedades que controlan c\u00f3mo se reproduce la animaci\u00f3n.<\/p>\n\n\n\n
animation-name<\/h3>\n\n\n\n
La propiedad animation-name<\/code> indica el nombre de la animaci\u00f3n que queremos aplicar.<\/p>\n\n\n\n
.elemento {\n  animation-name: aparecer;\n}\n<\/code><\/pre>\n\n\n\n
Ese nombre debe coincidir con el nombre definido en @keyframes<\/code>.<\/p>\n\n\n\n
@keyframes aparecer {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n<\/code><\/pre>\n\n\n\n
Si el nombre no coincide, la animaci\u00f3n no funcionar\u00e1. Este es uno de los errores m\u00e1s habituales cuando se empieza a trabajar con keyframes CSS.<\/p>\n\n\n\n
animation-duration<\/h3>\n\n\n\n
animation-duration<\/code> define cu\u00e1nto dura la animaci\u00f3n.<\/p>\n\n\n\n
.elemento {\n  animation-duration: 2s;\n}\n<\/code><\/pre>\n\n\n\n
Puede expresarse en segundos (s<\/code>) o milisegundos (ms<\/code>).<\/p>\n\n\n\n
.elemento {\n  animation-duration: 500ms;\n}\n<\/code><\/pre>\n\n\n\n
Una duraci\u00f3n demasiado corta puede pasar desapercibida. Una duraci\u00f3n demasiado larga puede resultar pesada. En interfaces web, muchas microinteracciones suelen funcionar bien entre 150ms<\/code> y 500ms<\/code>, aunque depende del tipo de efecto y del contexto.<\/p>\n\n\n\n
Por ejemplo, no es lo mismo animar el hover de un bot\u00f3n que una entrada de contenido m\u00e1s elaborada. En el primer caso, una duraci\u00f3n breve suele ser suficiente. En el segundo, puede tener sentido usar un tiempo algo mayor.<\/p>\n\n\n\n
animation-timing-function<\/h3>\n\n\n\n
La propiedad animation-timing-function<\/code> controla la velocidad de la animaci\u00f3n a lo largo del tiempo.<\/p>\n\n\n\n
.elemento {\n  animation-timing-function: ease-in-out;\n}\n<\/code><\/pre>\n\n\n\n
Algunos valores frecuentes son:<\/p>\n\n\n\n