{"id":19401,"date":"2026-06-14T06:46:00","date_gmt":"2026-06-14T04:46:00","guid":{"rendered":"https:\/\/martagonzalez.dev\/wp\/blog\/\/"},"modified":"2026-06-14T11:26:29","modified_gmt":"2026-06-14T09:26:29","slug":"como-crear-animaciones-suaves-con-transition","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/","title":{"rendered":"C\u00f3mo crear animaciones suaves con transition"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"\"<\/figure>\n\n\n\n

Crear una interfaz agradable no depende solo de elegir buenos colores, una tipograf\u00eda legible o una estructura clara. Tambi\u00e9n influye mucho c\u00f3mo responde la web cuando una persona interact\u00faa con ella. Un bot\u00f3n que cambia de estado de forma brusca puede sentirse r\u00edgido. En cambio, un bot\u00f3n que cambia de color o se desplaza ligeramente con suavidad transmite una sensaci\u00f3n m\u00e1s cuidada y profesional.<\/p>\n\n\n\n

Aqu\u00ed es donde entra en juego transition<\/code>, una de las propiedades m\u00e1s \u00fatiles de CSS para crear peque\u00f1as animaciones entre dos estados. Con ella podemos suavizar cambios de color, movimientos, escalados, opacidades o sombras sin necesidad de utilizar JavaScript ni crear animaciones complejas con @keyframes<\/code>.<\/p>\n\n\n\n

Si est\u00e1s empezando a trabajar con movimiento en interfaces, te recomiendo leer tambi\u00e9n esta gu\u00eda sobre animaciones CSS desde cero, donde explico las bases para entender cu\u00e1ndo usar transition<\/code>, cu\u00e1ndo usar animation<\/code> y qu\u00e9 propiedades conviene animar.<\/p>\n\n\n\n

En este art\u00edculo vamos a centrarnos en c\u00f3mo crear animaciones suaves con transition<\/code><\/strong>, c\u00f3mo escribir su sintaxis correctamente, qu\u00e9 errores evitar y c\u00f3mo aplicarla en botones, enlaces, tarjetas, men\u00fas e im\u00e1genes.<\/p>\n\n\n\n

Qu\u00e9 es transition<\/code> en CSS<\/h2>\n\n\n\n

La propiedad transition<\/code> permite que un cambio entre dos estados de un elemento no ocurra de golpe, sino de forma progresiva.<\/p>\n\n\n\n

Por ejemplo, imagina un bot\u00f3n con un color de fondo rosa. Cuando pasas el cursor por encima, ese bot\u00f3n cambia a morado. Sin transici\u00f3n, el cambio es inmediato. Con transition<\/code>, el navegador genera los estados intermedios y el cambio se percibe de manera m\u00e1s suave.<\/p>\n\n\n\n

.button {\n  background-color: #cc2b5e;\n  transition: background-color 0.3s ease;\n}\n\n.button:hover {\n  background-color: #753a88;\n}\n<\/code><\/pre>\n\n\n\n
En este ejemplo, el cambio de color tarda 0.3s<\/code> y utiliza una curva de movimiento ease<\/code>. Es un detalle peque\u00f1o, pero cambia mucho la percepci\u00f3n de la interfaz.<\/p>\n\n\n\n
La idea principal es sencilla: transition<\/code> suaviza el paso de un valor CSS a otro<\/strong>. No crea una animaci\u00f3n compleja por s\u00ed sola, sino que anima un cambio que ya existe.<\/p>\n\n\n\n
Por eso suele utilizarse en estados como:<\/p>\n\n\n\n
    \n
  • :hover<\/code><\/li>\n\n\n\n
  • :focus<\/code><\/li>\n\n\n\n
  • :active<\/code><\/li>\n\n\n\n
  • clases a\u00f1adidas con JavaScript<\/li>\n\n\n\n
  • cambios visuales en componentes interactivos<\/li>\n<\/ul>\n\n\n\n
    Es una propiedad especialmente \u00fatil para microinteracciones: botones, enlaces, tarjetas, men\u00fas, iconos, tooltips o peque\u00f1os efectos visuales.<\/p>\n\n\n\n
    Diferencia entre transition<\/code> y animation<\/code><\/h2>\n\n\n\n
    Una duda muy habitual es cu\u00e1ndo conviene usar transition<\/code> y cu\u00e1ndo es mejor usar animation<\/code>.<\/p>\n\n\n\n
    Aunque ambas sirven para crear movimiento en CSS, no tienen el mismo prop\u00f3sito.<\/p>\n\n\n\n
    transition<\/code> se utiliza cuando queremos animar el cambio entre dos estados. Por ejemplo, un bot\u00f3n en reposo y ese mismo bot\u00f3n en estado hover<\/code>.<\/p>\n\n\n\n
    .card {\n  transform: translateY(0);\n  transition: transform 0.25s ease;\n}\n\n.card:hover {\n  transform: translateY(-6px);\n}\n<\/code><\/pre>\n\n\n\n
    Aqu\u00ed solo hay dos estados: la tarjeta en su posici\u00f3n inicial y la tarjeta ligeramente elevada. Este es un caso perfecto para usar transition<\/code>.<\/p>\n\n\n\n
    En cambio, animation<\/code> se utiliza cuando necesitamos una secuencia m\u00e1s elaborada, varios pasos intermedios o una repetici\u00f3n. Por ejemplo, un loader girando, un icono latiendo en bucle o una animaci\u00f3n de entrada con diferentes fases.<\/p>\n\n\n\n
    Regla pr\u00e1ctica para elegir<\/h3>\n\n\n\n
    Puedes quedarte con esta idea:<\/p>\n\n\n\n
    Si hay dos estados, usa transition<\/code>.<\/strong>
    Si hay una secuencia o repetici\u00f3n, usa animation<\/code>.<\/strong><\/p>\n\n\n\n
    Para un efecto hover<\/code>, lo normal es usar transition<\/code>. Para un loader infinito, probablemente usar\u00e1s @keyframes<\/code> y animation<\/code>.<\/p>\n\n\n\n
    Esta diferencia es importante porque muchas veces se usa animation<\/code> para resolver efectos que podr\u00edan hacerse de forma m\u00e1s simple, limpia y mantenible con transition<\/code>.<\/p>\n\n\n\n
    Sintaxis de transition<\/code><\/h2>\n\n\n\n
    La propiedad transition<\/code> es una abreviatura que agrupa varias propiedades relacionadas con la transici\u00f3n.<\/p>\n\n\n\n
    Su sintaxis habitual es:<\/p>\n\n\n\n
    transition: propiedad duraci\u00f3n funci\u00f3n-de-tiempo retraso;\n<\/code><\/pre>\n\n\n\n
    Por ejemplo:<\/p>\n\n\n\n
    transition: transform 0.3s ease-in-out 0s;\n<\/code><\/pre>\n\n\n\n
    Este c\u00f3digo indica que la propiedad transform<\/code> debe cambiar durante 0.3s<\/code>, con una curva ease-in-out<\/code> y sin retraso.<\/p>\n\n\n\n
    Tambi\u00e9n se puede escribir de forma separada:<\/p>\n\n\n\n
    .element {\n  transition-property: transform;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  transition-delay: 0s;\n}\n<\/code><\/pre>\n\n\n\n
    Ambas formas son correctas, pero en proyectos reales suele utilizarse la versi\u00f3n abreviada porque es m\u00e1s compacta y f\u00e1cil de leer.<\/p>\n\n\n\n
    transition-property<\/code>: qu\u00e9 propiedad se anima<\/h3>\n\n\n\n
    transition-property<\/code> indica qu\u00e9 propiedad CSS queremos animar.<\/p>\n\n\n\n
    transition-property: background-color;\n<\/code><\/pre>\n\n\n\n
    Tambi\u00e9n podemos animar varias propiedades separ\u00e1ndolas con comas:<\/p>\n\n\n\n
    transition-property: background-color, transform;\n<\/code><\/pre>\n\n\n\n
    Una opci\u00f3n muy com\u00fan es usar all<\/code>:<\/p>\n\n\n\n
    transition: all 0.3s ease;\n<\/code><\/pre>\n\n\n\n
    Aunque puede parecer c\u00f3modo, conviene tener cuidado. all<\/code> indica que cualquier propiedad que cambie ser\u00e1 animada. Esto puede provocar resultados inesperados si m\u00e1s adelante modificas otras propiedades del elemento.<\/p>\n\n\n\n
    Por eso, en muchos casos es mejor indicar exactamente qu\u00e9 propiedades quieres animar:<\/p>\n\n\n\n
    transition: background-color 0.3s ease, transform 0.3s ease;\n<\/code><\/pre>\n\n\n\n
    El c\u00f3digo queda m\u00e1s claro, m\u00e1s predecible y m\u00e1s f\u00e1cil de mantener.<\/p>\n\n\n\n
    transition-duration<\/code>: cu\u00e1nto dura la transici\u00f3n<\/h3>\n\n\n\n
    transition-duration<\/code> define cu\u00e1nto tarda la transici\u00f3n en completarse. Puede expresarse en segundos o milisegundos.<\/p>\n\n\n\n
    transition-duration: 300ms;\n<\/code><\/pre>\n\n\n\n
    O tambi\u00e9n:<\/p>\n\n\n\n
    transition-duration: 0.3s;\n<\/code><\/pre>\n\n\n\n
    Para microinteracciones, como botones o enlaces, suelen funcionar bien valores entre 150ms<\/code> y 300ms<\/code>.<\/p>\n\n\n\n
    Si la transici\u00f3n es demasiado r\u00e1pida, apenas se nota. Si es demasiado lenta, puede hacer que la interfaz se sienta pesada.<\/p>\n\n\n\n
    .button {\n  transition: background-color 180ms ease, transform 180ms ease;\n}\n<\/code><\/pre>\n\n\n\n
    Este tipo de duraci\u00f3n suele funcionar muy bien para botones porque aporta suavidad sin hacer esperar a la persona usuaria.<\/p>\n\n\n\n
    transition-timing-function<\/code>: c\u00f3mo se mueve la transici\u00f3n<\/h3>\n\n\n\n
    La funci\u00f3n de tiempo define c\u00f3mo progresa la transici\u00f3n durante su duraci\u00f3n. Es decir, si empieza r\u00e1pido, termina lento, mantiene velocidad constante o combina aceleraci\u00f3n y desaceleraci\u00f3n.<\/p>\n\n\n\n
    Algunos valores habituales son:<\/p>\n\n\n\n
    transition-timing-function: ease;\ntransition-timing-function: linear;\ntransition-timing-function: ease-in;\ntransition-timing-function: ease-out;\ntransition-timing-function: ease-in-out;\n<\/code><\/pre>\n\n\n\n
    El valor ease<\/code> suele funcionar bien en muchos casos. Sin embargo, para interfaces m\u00e1s cuidadas, ease-out<\/code> y ease-in-out<\/code> pueden dar una sensaci\u00f3n m\u00e1s natural.<\/p>\n\n\n\n
    Por ejemplo:<\/p>\n\n\n\n
    .card {\n  transition: transform 0.25s ease-out;\n}\n<\/code><\/pre>\n\n\n\n
    ease-out<\/code> hace que el movimiento empiece con m\u00e1s energ\u00eda y termine suavemente. Es muy \u00fatil para tarjetas que se elevan, elementos que aparecen o peque\u00f1os desplazamientos.<\/p>\n\n\n\n
    transition-delay<\/code>: retrasar el inicio<\/h3>\n\n\n\n
    transition-delay<\/code> permite retrasar el inicio de la transici\u00f3n.<\/p>\n\n\n\n
    transition-delay: 0.1s;\n<\/code><\/pre>\n\n\n\n
    Puede ser \u00fatil cuando quieres crear un efecto escalonado, por ejemplo en una lista de elementos que aparecen de forma progresiva.<\/p>\n\n\n\n
    .item {\n  opacity: 0;\n  transform: translateY(10px);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n.item.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n<\/code><\/pre>\n\n\n\n
    El retraso puede aportar ritmo visual, pero conviene usarlo con moderaci\u00f3n. Si todo tarda demasiado en responder, la experiencia puede sentirse lenta.<\/p>\n\n\n\n
    C\u00f3mo crear un hover suave con transition<\/code><\/h2>\n\n\n\n
    Uno de los usos m\u00e1s habituales de transition<\/code> es crear un hover<\/code> suave en botones, enlaces o tarjetas.<\/p>\n\n\n\n
    Veamos un ejemplo sencillo:<\/p>\n\n\n\n
    .button {\n  display: inline-block;\n  padding: 0.85rem 1.4rem;\n  border-radius: 999px;\n  background-color: #cc2b5e;\n  color: #ffffff;\n  text-decoration: none;\n  transition: background-color 0.25s ease, transform 0.25s ease;\n}\n\n.button:hover {\n  background-color: #753a88;\n  transform: translateY(-2px);\n}\n<\/code><\/pre>\n\n\n\n
    Aqu\u00ed ocurren dos cosas: cambia el color de fondo y el bot\u00f3n se desplaza ligeramente hacia arriba.<\/p>\n\n\n\n
    El resultado es una interacci\u00f3n sencilla, pero m\u00e1s fluida y agradable que un cambio instant\u00e1neo.<\/p>\n\n\n\n
    A\u00f1adir tambi\u00e9n el estado focus<\/code><\/h3>\n\n\n\n
    Un error frecuente es dise\u00f1ar solo el estado :hover<\/code> y olvidarse de las personas que navegan con teclado.<\/p>\n\n\n\n
    Por eso, siempre que tenga sentido, conviene a\u00f1adir tambi\u00e9n :focus-visible<\/code>:<\/p>\n\n\n\n
    .button:hover,\n.button:focus-visible {\n  background-color: #753a88;\n  transform: translateY(-2px);\n}\n<\/code><\/pre>\n\n\n\n
    As\u00ed el bot\u00f3n responde tanto al cursor como al foco de teclado. Es un peque\u00f1o detalle que mejora la accesibilidad y hace que la interfaz sea m\u00e1s coherente.<\/p>\n\n\n\n
    Si este tema te interesa, tambi\u00e9n puedes conectar este tipo de decisiones con el dise\u00f1o de interacciones y prototipos. En esta gu\u00eda sobre c\u00f3mo pasar de wireframe a prototipo interactivo en Figma explico c\u00f3mo pensar mejor los estados y flujos antes de llevarlos al c\u00f3digo.<\/p>\n\n\n\n
    Propiedades recomendadas para animaciones suaves CSS<\/h2>\n\n\n\n
    No todas las propiedades CSS se animan igual de bien. Algunas obligan al navegador a recalcular el layout de la p\u00e1gina, mientras que otras son m\u00e1s eficientes.<\/p>\n\n\n\n
    Para conseguir animaciones suaves, normalmente conviene priorizar:<\/p>\n\n\n\n
      \n
    • transform<\/code><\/li>\n\n\n\n
    • opacity<\/code><\/li>\n<\/ul>\n\n\n\n
      Con transform<\/code> podemos mover, escalar, rotar o inclinar un elemento sin modificar directamente el flujo del documento.<\/p>\n\n\n\n
      .card:hover {\n  transform: scale(1.03);\n}\n<\/code><\/pre>\n\n\n\n
      Con opacity<\/code> podemos crear efectos de aparici\u00f3n y desaparici\u00f3n:<\/p>\n\n\n\n
      .tooltip {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.tooltip.is-visible {\n  opacity: 1;\n}\n<\/code><\/pre>\n\n\n\n
      Mejor transform<\/code> que top<\/code>, left<\/code> o margin<\/code><\/h3>\n\n\n\n
      Aunque se pueden animar propiedades como width<\/code>, height<\/code>, margin<\/code>, padding<\/code>, top<\/code> o left<\/code>, no siempre es recomendable. Estos cambios pueden afectar al layout y hacer que la animaci\u00f3n sea menos fluida.<\/p>\n\n\n\n
      Por ejemplo, en lugar de mover un elemento con top<\/code>:<\/p>\n\n\n\n
      .box:hover {\n  top: -10px;\n}\n<\/code><\/pre>\n\n\n\n
      es preferible usar transform<\/code>:<\/p>\n\n\n\n
      .box:hover {\n  transform: translateY(-10px);\n}\n<\/code><\/pre>\n\n\n\n
      El resultado visual puede ser parecido, pero la segunda opci\u00f3n suele ser m\u00e1s estable y eficiente.<\/p>\n\n\n\n
      Ejemplos pr\u00e1cticos de CSS transitions<\/h2>\n\n\n\n
      A continuaci\u00f3n tienes varios ejemplos que puedes adaptar a tus propios proyectos.<\/p>\n\n\n\n
      Enlace con cambio de color suave<\/h3>\n\n\n\n
      .link {\n  color: #cc2b5e;\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.link:hover,\n.link:focus-visible {\n  color: #753a88;\n}\n<\/code><\/pre>\n\n\n\n
      Este patr\u00f3n funciona muy bien en enlaces dentro de art\u00edculos, men\u00fas o llamadas a la acci\u00f3n secundarias.<\/p>\n\n\n\n
      Tarjeta que se eleva al pasar el cursor<\/h3>\n\n\n\n
      .card {\n  padding: 1.5rem;\n  border-radius: 1rem;\n  background-color: #ffffff;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);\n  transform: translateY(0);\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\n}\n\n.card:hover {\n  transform: translateY(-6px);\n  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);\n}\n<\/code><\/pre>\n\n\n\n
      Este efecto es muy \u00fatil en tarjetas de servicios, entradas destacadas del blog o proyectos de portfolio. La clave est\u00e1 en que el movimiento sea sutil. No hace falta desplazar mucho el elemento para que se entienda que es interactivo.<\/p>\n\n\n\n
      Imagen con zoom suave<\/h3>\n\n\n\n
      .image-wrapper {\n  overflow: hidden;\n  border-radius: 1rem;\n}\n\n.image-wrapper img {\n  display: block;\n  width: 100%;\n  transition: transform 0.4s ease;\n}\n\n.image-wrapper:hover img {\n  transform: scale(1.06);\n}\n<\/code><\/pre>\n\n\n\n
      El contenedor tiene overflow: hidden<\/code> para evitar que la imagen se salga visualmente al escalar. Es un recurso muy usado en galer\u00edas, cards de blog y proyectos visuales.<\/p>\n\n\n\n
      Men\u00fa desplegable con opacidad y desplazamiento<\/h3>\n\n\n\n
      .dropdown {\n  opacity: 0;\n  transform: translateY(8px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown.is-open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n<\/code><\/pre>\n\n\n\n
      Este ejemplo es \u00fatil cuando el estado del men\u00fa se controla con una clase, por ejemplo mediante JavaScript.<\/p>\n\n\n\n
      Si est\u00e1s trabajando con rutas, navegaci\u00f3n o enlaces internos en proyectos React, tambi\u00e9n puede interesarte esta gu\u00eda sobre React Router Hash Link y enlaces ancla en React, donde el comportamiento de navegaci\u00f3n puede combinarse con detalles visuales como el desplazamiento suave.<\/p>\n\n\n\n
      Buenas pr\u00e1cticas para usar transition<\/code><\/h2>\n\n\n\n
      Una transici\u00f3n bien aplicada puede mejorar mucho la experiencia de usuario. Pero si se usa sin intenci\u00f3n, tambi\u00e9n puede generar ruido o distracci\u00f3n.<\/p>\n\n\n\n
      Usa transiciones con un prop\u00f3sito<\/h3>\n\n\n\n
      No todos los elementos necesitan moverse. La animaci\u00f3n debe ayudar a entender mejor una acci\u00f3n, no convertirse en un adorno constante.<\/p>\n\n\n\n
      Antes de a\u00f1adir una transici\u00f3n, preg\u00fantate:<\/p>\n\n\n\n
        \n
      • \u00bfAyuda a comprender mejor la interacci\u00f3n?<\/li>\n\n\n\n
      • \u00bfHace que el cambio de estado sea m\u00e1s claro?<\/li>\n\n\n\n
      • \u00bfRefuerza la acci\u00f3n de la persona usuaria?<\/li>\n\n\n\n
      • \u00bfPuede resultar molesta si se repite muchas veces?<\/li>\n<\/ul>\n\n\n\n
        Una buena transici\u00f3n suele sentirse natural. Est\u00e1 ah\u00ed, mejora la experiencia, pero no roba protagonismo.<\/p>\n\n\n\n
        Mant\u00e9n duraciones cortas<\/h3>\n\n\n\n
        Para botones, enlaces e iconos, normalmente basta con una duraci\u00f3n entre 150ms<\/code> y 300ms<\/code>.<\/p>\n\n\n\n
        Para elementos m\u00e1s grandes, como modales, paneles o men\u00fas desplegables, puedes usar valores algo mayores, como 300ms<\/code> o 400ms<\/code>.<\/p>\n\n\n\n
        .modal {\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n<\/code><\/pre>\n\n\n\n
        La transici\u00f3n debe acompa\u00f1ar la experiencia, no ralentizarla.<\/p>\n\n\n\n
        Evita abusar de transition: all<\/code><\/h3>\n\n\n\n
        Aunque transition: all<\/code> parece una soluci\u00f3n r\u00e1pida, puede generar efectos inesperados.<\/p>\n\n\n\n
        transition: all 0.3s ease;\n<\/code><\/pre>\n\n\n\n
        Es mejor indicar las propiedades concretas:<\/p>\n\n\n\n
        transition: background-color 0.3s ease, transform 0.3s ease;\n<\/code><\/pre>\n\n\n\n
        As\u00ed el c\u00f3digo es m\u00e1s expl\u00edcito y f\u00e1cil de mantener.<\/p>\n\n\n\n
        Respeta la preferencia de movimiento reducido<\/h3>\n\n\n\n
        No todas las personas viven el movimiento en pantalla de la misma forma. Algunas pueden sentirse inc\u00f3modas con animaciones excesivas.<\/p>\n\n\n\n
        Por eso conviene tener en cuenta prefers-reduced-motion<\/code>:<\/p>\n\n\n\n
        @media (prefers-reduced-motion: reduce) {\n  * {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n  }\n}\n<\/code><\/pre>\n\n\n\n
        Esto reduce al m\u00ednimo las animaciones para quienes han indicado en su sistema que prefieren menos movimiento.<\/p>\n\n\n\n
        Errores comunes al usar transition<\/code><\/h2>\n\n\n\n
        Aunque transition<\/code> es sencilla, hay varios errores habituales que pueden hacer que no funcione como esperas.<\/p>\n\n\n\n
        Poner la transici\u00f3n solo en :hover<\/code><\/h3>\n\n\n\n
        Este es uno de los errores m\u00e1s comunes:<\/p>\n\n\n\n
        .button:hover {\n  background-color: #753a88;\n  transition: background-color 0.3s ease;\n}\n<\/code><\/pre>\n\n\n\n
        El problema es que la transici\u00f3n solo se declara en el estado hover<\/code>. Lo recomendable es definirla en el estado base:<\/p>\n\n\n\n
        .button {\n  background-color: #cc2b5e;\n  transition: background-color 0.3s ease;\n}\n\n.button:hover {\n  background-color: #753a88;\n}\n<\/code><\/pre>\n\n\n\n
        As\u00ed el navegador puede animar tanto la entrada como la salida del estado.<\/p>\n\n\n\n
        Intentar animar display<\/code><\/h3>\n\n\n\n
        No se puede animar de forma fluida un cambio de display: none<\/code> a display: block<\/code>.<\/p>\n\n\n\n
        Esto no generar\u00e1 una transici\u00f3n suave:<\/p>\n\n\n\n
        .menu {\n  display: none;\n  transition: display 0.3s ease;\n}\n\n.menu.is-open {\n  display: block;\n}\n<\/code><\/pre>\n\n\n\n
        Una alternativa m\u00e1s adecuada es combinar opacity<\/code>, transform<\/code>, visibility<\/code> y pointer-events<\/code>:<\/p>\n\n\n\n
        .menu {\n  opacity: 0;\n  transform: translateY(10px);\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;\n}\n\n.menu.is-open {\n  opacity: 1;\n  transform: translateY(0);\n  visibility: visible;\n  pointer-events: auto;\n}\n<\/code><\/pre>\n\n\n\n
        Crear movimientos demasiado exagerados<\/h3>\n\n\n\n
        Una transici\u00f3n no tiene que ser espectacular para funcionar. De hecho, muchas veces cuanto m\u00e1s sutil, mejor.<\/p>\n\n\n\n
        Por ejemplo, una tarjeta que se desplaza 40px<\/code> puede sentirse exagerada. En cambio, un desplazamiento de 4px<\/code>, 6px<\/code> u 8px<\/code> suele ser suficiente.<\/p>\n\n\n\n
        .card:hover {\n  transform: translateY(-6px);\n}\n<\/code><\/pre>\n\n\n\n
        La suavidad no depende solo de la duraci\u00f3n. Tambi\u00e9n depende de la distancia, la curva de movimiento y el contexto.<\/p>\n\n\n\n
        C\u00f3mo combinar varias transiciones<\/h2>\n\n\n\n
        Puedes aplicar varias transiciones a un mismo elemento separ\u00e1ndolas con comas.<\/p>\n\n\n\n
        .button {\n  background-color: #cc2b5e;\n  color: #ffffff;\n  transform: translateY(0);\n  transition:\n    background-color 0.25s ease,\n    color 0.25s ease,\n    transform 0.25s ease;\n}\n\n.button:hover {\n  background-color: #753a88;\n  color: #ffffff;\n  transform: translateY(-2px);\n}\n<\/code><\/pre>\n\n\n\n
        Tambi\u00e9n puedes usar duraciones diferentes para cada propiedad:<\/p>\n\n\n\n
        .card {\n  transition:\n    transform 0.25s ease-out,\n    box-shadow 0.35s ease;\n}\n<\/code><\/pre>\n\n\n\n
        En este caso, el movimiento de la tarjeta es un poco m\u00e1s r\u00e1pido que el cambio de sombra. Son detalles peque\u00f1os, pero ayudan a que la interfaz se sienta m\u00e1s cuidada.<\/p>\n\n\n\n
        C\u00f3mo organizar tus transiciones en proyectos reales<\/h2>\n\n\n\n
        Cuando una web crece, no conviene escribir duraciones y curvas distintas en cada componente sin ning\u00fan criterio. Lo ideal es crear cierta coherencia visual.<\/p>\n\n\n\n
        Una buena pr\u00e1ctica es definir variables CSS:<\/p>\n\n\n\n
        :root {\n  --transition-fast: 150ms ease;\n  --transition-base: 250ms ease;\n  --transition-slow: 400ms ease;\n}\n<\/code><\/pre>\n\n\n\n
        Despu\u00e9s puedes reutilizarlas:<\/p>\n\n\n\n
        .button {\n  transition: background-color var(--transition-base), transform var(--transition-base);\n}\n<\/code><\/pre>\n\n\n\n
        Esto ayuda a mantener una experiencia consistente en toda la interfaz.<\/p>\n\n\n\n
        Tambi\u00e9n puedes crear utilidades reutilizables:<\/p>\n\n\n\n
        .u-transition {\n  transition: transform 0.25s ease, opacity 0.25s ease;\n}\n<\/code><\/pre>\n\n\n\n
        Eso s\u00ed, conviene no abusar de clases gen\u00e9ricas si est\u00e1s trabajando con componentes muy espec\u00edficos. Lo importante es que el sistema sea claro y f\u00e1cil de mantener.<\/p>\n\n\n\n
        Si adem\u00e1s est\u00e1s guardando preferencias visuales en el navegador, como modo claro, modo oscuro o estados personalizados, puedes complementar este tema con el art\u00edculo sobre c\u00f3mo usar localStorage y sessionStorage en proyectos JavaScript.<\/p>\n\n\n\n
        Preguntas frecuentes sobre transition CSS<\/code><\/h2>\n\n\n\n
        \u00bfQu\u00e9 es transition<\/code> en CSS?<\/h3>\n\n\n\n
        transition<\/code> es una propiedad de CSS que permite suavizar el cambio entre dos estados de un elemento. Por ejemplo, puede hacer que un bot\u00f3n cambie de color de forma progresiva al pasar el cursor por encima.<\/p>\n\n\n\n
        Se utiliza mucho para crear animaciones suaves en botones, enlaces, tarjetas, men\u00fas, im\u00e1genes y otros elementos interactivos.<\/p>\n\n\n\n
        \u00bfCu\u00e1l es la diferencia entre transition<\/code> y animation<\/code>?<\/h3>\n\n\n\n
        transition<\/code> sirve para animar el cambio entre dos estados, como normal y hover<\/code>. animation<\/code>, en cambio, permite crear secuencias m\u00e1s complejas mediante @keyframes<\/code>, repeticiones o varios pasos intermedios.<\/p>\n\n\n\n
        Si necesitas suavizar un cambio simple, usa transition<\/code>. Si necesitas una secuencia, usa animation<\/code>.<\/p>\n\n\n\n
        \u00bfQu\u00e9 propiedades conviene animar para conseguir transiciones suaves?<\/h3>\n\n\n\n
        Las propiedades m\u00e1s recomendadas suelen ser transform<\/code> y opacity<\/code>, porque permiten crear efectos visuales fluidos sin modificar directamente el layout.<\/p>\n\n\n\n
        Por ejemplo, para mover un elemento es mejor usar transform: translateY()<\/code> que cambiar top<\/code> o margin<\/code>. Para mostrar u ocultar algo suavemente, suele ser mejor usar opacity<\/code> que intentar animar display<\/code>.<\/p>\n\n\n\n
        Cuando una peque\u00f1a transici\u00f3n mejora toda la experiencia<\/h2>\n\n\n\n
        Crear animaciones suaves con transition<\/code> no consiste en llenar una web de efectos. Consiste en dise\u00f1ar cambios de estado que ayuden a entender mejor lo que ocurre en la interfaz.<\/p>\n\n\n\n
        Un bot\u00f3n que responde con suavidad confirma una acci\u00f3n. Una tarjeta que se eleva ligeramente indica que puede interactuarse con ella. Un men\u00fa que aparece de forma gradual evita una sensaci\u00f3n brusca. Un enlace que cambia de color de manera fluida hace que la navegaci\u00f3n se sienta m\u00e1s cuidada.<\/p>\n\n\n\n
        La clave est\u00e1 en usar transition CSS<\/code> con intenci\u00f3n: elegir bien qu\u00e9 propiedad animar, cu\u00e1nto debe durar, qu\u00e9 curva de movimiento encaja mejor y c\u00f3mo afecta esa decisi\u00f3n a la accesibilidad y al rendimiento.<\/p>\n\n\n\n
        En definitiva, las CSS transitions<\/code> son una herramienta sencilla, potente y muy \u00fatil para mejorar la calidad percibida de una web. No necesitas crear grandes efectos para que una interfaz se sienta m\u00e1s profesional. A veces, una transici\u00f3n de 200ms<\/code>, aplicada en el lugar adecuado, marca la diferencia entre una experiencia r\u00edgida y una experiencia fluida, clara y agradable.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Aprende a crear animaciones suaves con transition en CSS, controlar su duraci\u00f3n y aplicar efectos hover fluidos, accesibles y f\u00e1ciles de mantener.<\/p>\n","protected":false},"author":1,"featured_media":19431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"mg_rating_sum":5,"mg_rating_count":1,"mg_rating_average":5,"footnotes":""},"categories":[82],"tags":[373,374,372,342],"class_list":["post-19401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-animaciones-suaves-css","tag-css-transitions","tag-hover-transition-css","tag-transition-css"],"acf":[],"yoast_head":"\nC\u00f3mo crear animaciones suaves con transition en CSS<\/title>\n<meta name=\"description\" content=\"C\u00f3mo crear animaciones suaves con transition en CSS y aplica efectos hover fluidos, accesibles y optimizados en botones, tarjetas y men\u00fas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear animaciones suaves con transition\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo crear animaciones suaves con transition en CSS y aplica efectos hover fluidos, accesibles y optimizados en botones, tarjetas y men\u00fas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/\" \/>\n<meta property=\"og:site_name\" content=\"Marta Gonz\u00e1lez - Desarrollo Front-end\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-14T04:46:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-14T09:26:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/06\/como-crear-animaciones-suaves-con-transition-css.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"marta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"marta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/\"},\"author\":{\"name\":\"marta\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"headline\":\"C\u00f3mo crear animaciones suaves con transition\",\"datePublished\":\"2026-06-14T04:46:00+00:00\",\"dateModified\":\"2026-06-14T09:26:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/\"},\"wordCount\":2391,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/como-crear-animaciones-suaves-con-transition-css.avif\",\"keywords\":[\"animaciones suaves CSS\",\"CSS transitions\",\"hover transition CSS\",\"transition CSS\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/\",\"name\":\"C\u00f3mo crear animaciones suaves con transition en CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/como-crear-animaciones-suaves-con-transition-css.avif\",\"datePublished\":\"2026-06-14T04:46:00+00:00\",\"dateModified\":\"2026-06-14T09:26:29+00:00\",\"description\":\"C\u00f3mo crear animaciones suaves con transition en CSS y aplica efectos hover fluidos, accesibles y optimizados en botones, tarjetas y men\u00fas.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#primaryimage\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/como-crear-animaciones-suaves-con-transition-css.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/como-crear-animaciones-suaves-con-transition-css.avif\",\"width\":1536,\"height\":1024,\"caption\":\"Ejemplo visual de animaciones suaves con CSS transition aplicadas a botones, tarjetas y microinteracciones.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-crear-animaciones-suaves-con-transition\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear animaciones suaves con transition\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\",\"name\":\"Marta Gonz\u00e1lez\",\"description\":\"Desarrollo Front-end\",\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"alternateName\":\"Marta Gonz\u00e1lez Desarrollo Frontend\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\",\"name\":\"marta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"width\":575,\"height\":575,\"caption\":\"marta\"},\"logo\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\"},\"description\":\"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.\",\"sameAs\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100031998110346\",\"https:\\\/\\\/www.instagram.com\\\/mcgweb\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/martacg\\\/\",\"marta\"],\"birthDate\":\"1986-01-07\",\"gender\":\"mujer\",\"knowsAbout\":[\"HTML5\",\"CSS3\",\"Javascript\"],\"jobTitle\":\"Desarrollo Frontend\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/author\\\/marta\\\/\",\"publishingPrinciples\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/politica-de-privacidad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear animaciones suaves con transition en CSS","description":"C\u00f3mo crear animaciones suaves con transition en CSS y aplica efectos hover fluidos, accesibles y optimizados en botones, tarjetas y men\u00fas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear animaciones suaves con transition","og_description":"C\u00f3mo crear animaciones suaves con transition en CSS y aplica efectos hover fluidos, accesibles y optimizados en botones, tarjetas y men\u00fas.","og_url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/","og_site_name":"Marta Gonz\u00e1lez - Desarrollo Front-end","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_author":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_published_time":"2026-06-14T04:46:00+00:00","article_modified_time":"2026-06-14T09:26:29+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/06\/como-crear-animaciones-suaves-con-transition-css.avif","type":"image\/jpeg"}],"author":"marta","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"marta","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#article","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/"},"author":{"name":"marta","@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"headline":"C\u00f3mo crear animaciones suaves con transition","datePublished":"2026-06-14T04:46:00+00:00","dateModified":"2026-06-14T09:26:29+00:00","mainEntityOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/"},"wordCount":2391,"commentCount":0,"publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/06\/como-crear-animaciones-suaves-con-transition-css.avif","keywords":["animaciones suaves CSS","CSS transitions","hover transition CSS","transition CSS"],"articleSection":["Blog"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/","url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/","name":"C\u00f3mo crear animaciones suaves con transition en CSS","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#primaryimage"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/06\/como-crear-animaciones-suaves-con-transition-css.avif","datePublished":"2026-06-14T04:46:00+00:00","dateModified":"2026-06-14T09:26:29+00:00","description":"C\u00f3mo crear animaciones suaves con transition en CSS y aplica efectos hover fluidos, accesibles y optimizados en botones, tarjetas y men\u00fas.","breadcrumb":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#primaryimage","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/06\/como-crear-animaciones-suaves-con-transition-css.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/06\/como-crear-animaciones-suaves-con-transition-css.avif","width":1536,"height":1024,"caption":"Ejemplo visual de animaciones suaves con CSS transition aplicadas a botones, tarjetas y microinteracciones."},{"@type":"BreadcrumbList","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-crear-animaciones-suaves-con-transition\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martagonzalez.dev\/wp\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear animaciones suaves con transition"}]},{"@type":"WebSite","@id":"https:\/\/martagonzalez.dev\/wp\/#website","url":"https:\/\/martagonzalez.dev\/wp\/","name":"Marta Gonz\u00e1lez","description":"Desarrollo Front-end","publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"alternateName":"Marta Gonz\u00e1lez Desarrollo Frontend","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martagonzalez.dev\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738","name":"marta","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","width":575,"height":575,"caption":"marta"},"logo":{"@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif"},"description":"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.","sameAs":["https:\/\/martagonzalez.dev\/wp","https:\/\/www.facebook.com\/profile.php?id=100031998110346","https:\/\/www.instagram.com\/mcgweb","https:\/\/www.linkedin.com\/in\/martacg\/","marta"],"birthDate":"1986-01-07","gender":"mujer","knowsAbout":["HTML5","CSS3","Javascript"],"jobTitle":"Desarrollo Frontend","url":"https:\/\/martagonzalez.dev\/wp\/author\/marta\/","publishingPrinciples":"https:\/\/martagonzalez.dev\/wp\/politica-de-privacidad\/"}]}},"_links":{"self":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/comments?post=19401"}],"version-history":[{"count":2,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19401\/revisions"}],"predecessor-version":[{"id":19435,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19401\/revisions\/19435"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media\/19431"}],"wp:attachment":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media?parent=19401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/categories?post=19401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/tags?post=19401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}