Cómo crear una entrada desde la izquierda con CSS

Un efecto de entrada desde la izquierda desplaza un elemento desde una posición situada a la izquierda de su ubicación final hasta dejarlo a la vista. Puedes crearlo con CSS cambiando transform y opacity entre dos estados. Este ejemplo usa una transition; una animation de CSS con fotogramas clave es otra opción cuando el efecto requiere varios pasos o debe repetirse.

Cómo funciona una entrada desde la izquierda

Una transition anima una propiedad cuando cambia su valor. El elemento empieza desplazado hacia la izquierda y transparente; después, vuelve a su posición normal y se hace visible. translateX() controla el movimiento horizontal, mientras que la duración y la curva de aceleración de la transición determinan cómo se percibe el cambio. La propiedad transform modifica la posición visual sin cambiar el lugar que ocupa el elemento en el flujo del documento.

Preparar la estructura HTML

La página necesita un elemento con una clase que CSS pueda seleccionar. En el ejemplo completo, el elemento empieza solo con la clase slide-in, y JavaScript añade is-visible después de que se carga la página para que el navegador pueda realizar la transición desde el estado inicial. Si ambas clases están presentes en el HTML desde el principio, el elemento aparece visible en su primer renderizado, sin animarse desde el estado oculto. Para mostrar la transición de entrada, añade la clase de visibilidad después de que se haya renderizado el estado inicial, tal como hace el ejemplo.

Crear con CSS una entrada desde la izquierda

Establece el estado inicial con transform: translateX(-100vw) y opacity: 0. El desplazamiento equivalente al ancho de la ventana coloca el elemento a la izquierda; opacity lo vuelve transparente mientras está allí. En el estado visible, usa transform: translateX(0) y opacity: 1. Una transition en esas propiedades anima el cambio durante medio segundo con una curva de aceleración ease.

La página también oculta el desbordamiento horizontal para que la posición inicial fuera de pantalla no genere una barra de desplazamiento horizontal. Si quieres que el elemento recorra una distancia menor, ajusta el desplazamiento.

Activar y personalizar el efecto

Copia este JavaScript en un archivo, por ejemplo generate-page.js, y ejecútalo con Node.js; imprimirá el código fuente de una página HTML completa. Guarda ese código como slide-in.html y ábrelo en un navegador para ver el efecto. El ejemplo activa la transición al cargar la página; en un sitio, también puedes añadir la clase de visibilidad al hacer clic en un botón o en respuesta a otro evento. La etiqueta visible del ejemplo permanece en inglés.

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Slide in from the left</title>
  <style>
    body { overflow-x: hidden; font: 1rem sans-serif; }
    .slide-in {
      display: inline-block;
      padding: 1rem 1.5rem;
      background: #e7f1ff;
      transform: translateX(-100vw);
      opacity: 0;
      transition: transform 500ms ease, opacity 500ms ease;
    }
    .slide-in.is-visible {
      transform: translateX(0);
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slide-in">Hello, I slide in from the left!</div>
  <script>
    window.addEventListener("load", () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.querySelector(".slide-in").classList.add("is-visible");
        });
      });
    });
  </script>
</body>
</html>`;
console.log(html);

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Slide in from the left</title>
  <style>
    body { overflow-x: hidden; font: 1rem sans-serif; }
    .slide-in {
      display: inline-block;
      padding: 1rem 1.5rem;
      background: #e7f1ff;
      transform: translateX(-100vw);
      opacity: 0;
      transition: transform 500ms ease, opacity 500ms ease;
    }
    .slide-in.is-visible {
      transform: translateX(0);
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slide-in">Hello, I slide in from the left!</div>
  <script>
    window.addEventListener("load", () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.querySelector(".slide-in").classList.add("is-visible");
        });
      });
    });
  </script>
</body>
</html>

Para cambiar la velocidad, modifica 500ms; puedes ajustar la duración y la aceleración por separado. Para mover el elemento desde arriba, usa translateY() con una distancia vertical negativa en el estado inicial y translateY(0) en el estado visible. JavaScript es opcional si la clase de visibilidad ya está presente cuando se renderiza la página; úsalo cuando quieras que el efecto empiece tras un evento o un cambio de estado posterior.

Preguntas frecuentes

¿Funciona en dispositivos móviles?

El ejemplo usa transformaciones y transiciones de CSS. Como parte de la revisión habitual de compatibilidad, comprueba los navegadores y dispositivos que admite tu sitio.

¿Cómo cambio la duración?

Cambia la duración 500ms en la declaración transition. Si quieres que los cambios de transform y opacity terminen en momentos distintos, puedes asignarles duraciones diferentes.

¿Puede entrar el elemento desde otra dirección?

Sí. Usa translateY() para moverlo verticalmente o cambia el signo y la distancia de translateX() para que entre desde el lado horizontal opuesto.

¿Es necesario usar JavaScript?

No. CSS gestiona la transición entre los dos estados. JavaScript es solo una forma de cambiar la clase en el momento adecuado; también puedes incluir una clase en el HTML desde el principio o usar otro cambio de estado controlado por CSS.