How to Slide in From Left Transition in CSS

A slide-in-from-left effect moves an element from a position to the left of its final location into view. You can create it with CSS by changing transform and opacity between two states. This example uses a transition; a CSS animation with keyframes is another option when an effect needs several steps or repeats.

How a Slide-In From the Left Works

A transition animates a property as its value changes. The element starts translated left and transparent, then moves to its normal position and becomes visible. translateX() controls horizontal movement, while the transition duration and easing determine how the change feels. The transform property changes visual position without changing the element’s place in the document flow.

Set Up the HTML Structure

The page needs an element with a class that the CSS can target. In the complete example below, the element starts with only the slide-in class, and JavaScript adds is-visible after the page loads so the browser can transition from the initial state. If both classes are present in the HTML from the start, the element is visible on its first render without animating from the hidden state. To show the slide-in transition, add the visible class after the initial state has been rendered, as the example does.

Create a Slide-In From the Left in CSS

Set the starting state with transform: translateX(-100vw) and opacity: 0. The viewport-width translation places the element to the left; opacity makes it transparent while it is there. The visible state uses transform: translateX(0) and opacity: 1. A transition on those properties animates the change over half a second with an ease timing curve.

The page also hides horizontal overflow so the off-screen starting position does not create a horizontal scrollbar. Adjust the translation distance if you want the element to travel a shorter distance.

Trigger and Customize the Effect

Copy this JavaScript into a file such as generate-page.js and run it with Node.js; it prints a complete HTML page source. Save that source as slide-in.html and open it in a browser to see the effect. This example uses a page-load trigger; a site can instead add the visible class in response to a button click or another event.

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>

To change the speed, edit 500ms; duration and easing can be tuned independently. For motion from above, use translateY() with a negative vertical distance in the starting state and translateY(0) in the visible state. JavaScript is optional if the visible class is already present when the page is rendered; use JavaScript when the effect should start after an event or a later state change.

FAQ

Does this work on mobile?

The example uses CSS transforms and transitions. Check the browsers and devices your site supports as part of your normal compatibility review.

How do I change the duration?

Change the 500ms duration in the transition declaration. You can use different durations for transform and opacity if you want those changes to finish at different times.

Can the element slide in from another direction?

Yes. Use translateY() to move it vertically, or adjust the sign and distance of translateX() to enter from the opposite horizontal side.

Is JavaScript required?

No. CSS handles the transition between the two states. JavaScript is only one way to change the class at the right time; you can also use a class already present in the HTML or another CSS-driven state change.