Slide-In Animation with CSS Translate

Slide-In with Translate

Sliding elements into view using translate is one of the most fundamental animation patterns. It creates smooth entrance effects without triggering layout recalculations.

Transition Approach

.slide-element {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.slide-element.visible {
  transform: translateX(0);
  opacity: 1;
}

Keyframe Approach

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-element {
  animation: slideInLeft 0.4s ease-out forwards;
}

Slide Directions

Direction	Starting Transform
From left	translateX(-100%)
From right	translateX(100%)
From top	translateY(-100%)
From bottom	translateY(100%)

Combining with Scale

A common enhancement adds a subtle scale to the entrance:

@keyframes slideInScale {
  from {
    transform: translateX(-50px) scaleX(0.95) scaleY(0.95);
    opacity: 0;
  }
  to {
    transform: translateX(0) scaleX(1) scaleY(1);
    opacity: 1;
  }
}

Using Percentage vs Pixels

• Percentage (translateX(-100%)): Moves by the element's own width. Ideal for sliding completely off-screen.
• Pixels (translateX(-50px)): Fixed distance. Good for subtle shifts that don't depend on element size.