Slide left

Quick implementation

.slide-left {
  animation: slide-left 0.6s ease-out both;
}

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

@media (prefers-reduced-motion: reduce) {
  .slide-left {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building entrance animations for a UI.

Goal: A slide-left entrance animation that moves elements from the right
into their final position, combined with an opacity fade-in — no JavaScript.

Technical constraints:
- Use @keyframes with transform: translateX(100%) at the start and
  translateX(0) at the end, paired with opacity: 0 → opacity: 1.
- Apply animation: slide-left 0.6s ease-out both; (the "both" fill mode
  keeps opacity: 0 before the animation starts and holds translateX(0) after).
- Use oklch() for any colors — no hex or rgba values.
- Use CSS custom properties (var(--card), var(--text), etc.) for theming.
- Include @media (prefers-reduced-motion: reduce) that sets animation: none,
  opacity: 1, and transform: none on the animated element.

Framework variant (pick one):
A) Vanilla CSS class .slide-left applicable to any element.
B) React component — accept children, delay (number in seconds), and
   duration props; apply the class and inline animation-delay via style.

Edge cases to handle:
- Elements hidden off-screen before the animation fires may cause a
  horizontal scrollbar — set overflow: hidden on the parent container.
- Staggered lists should use animation-delay increments (e.g. 0.1s per item)
  rather than re-running the animation via JavaScript class toggling.
- When the animation ends, ensure the element stays in the "to" state —
  the fill-mode "both" handles this; document this for teammates.

Return CSS only (or a React component if variant B is chosen).

Why this matters in 2026

CSS-only entrance animations have replaced JavaScript animation libraries for the vast majority of UI reveal patterns. A slide-left entrance needs zero bytes of JavaScript — just a class and a keyframe. Libraries like GSAP and Framer Motion remain valuable for complex, sequenced choreography, but for a single element sliding in on page load, CSS is lighter, faster to parse, and simpler to maintain. As more sites adopt IntersectionObserver to trigger animations on scroll, the underlying animation itself stays pure CSS — the observer just toggles a class.

The logic

The animation combines two properties: transform: translateX() and opacity. Starting at translateX(100%) places the element one full element-width to the right of its natural position, out of view. As the keyframe progresses to translateX(0), the element slides into place. The simultaneous fade from opacity: 0 to opacity: 1 softens the entrance so it feels natural rather than mechanical.

The both fill mode is important: it applies the from keyframe values before the animation begins (keeping the element invisible and shifted right) and holds the to values after it ends (keeping it visible and in place). Without both, the element would flash into view at its natural position before the animation starts, then snap back after it ends.

Both transform and opacity are compositor-only properties — the browser can animate them on the GPU without triggering layout or paint. This makes the animation smooth even on lower-end devices.

Accessibility & performance

Because transform and opacity run on the compositor thread, they do not trigger layout recalculation or repaints. This is the gold standard for animation performance — the browser handles it independently of the main thread, meaning JavaScript-heavy pages won't cause the animation to stutter.

The prefers-reduced-motion: reduce media query is essential. Rapid lateral movement can trigger vestibular disorders and motion sickness for some users. Setting animation: none, opacity: 1, and transform: none inside the query ensures those users see the element in its final, visible state immediately — no movement, no flash of invisible content.

One layout concern: during the animation, the element exists off to the right of the viewport. If the parent container doesn't have overflow: hidden, this can create a horizontal scrollbar. Wrap animated elements in a container with overflow: hidden (or overflow-x: clip to preserve vertical scroll) to avoid this.