Slide right

Quick implementation

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

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

@media (prefers-reduced-motion: reduce) {
  .slide-right {
    animation: 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.

Goal: A slide-right entrance animation — elements start off-screen to the
left and slide into their final position — using only CSS, no JavaScript.

Technical constraints:
- Use @keyframes slide-right with transform: translateX(-100%) at 0% and
  translateX(0) at 100%.
- Combine with opacity: 0 → 1 for a smoother reveal.
- Use animation: slide-right 0.6s ease-out both so the element stays
  visible after the animation ends (fill-mode: both).
- All colors must use oklch() — no hex, no rgba.
- Include @media (prefers-reduced-motion: reduce) that sets animation: none.

Framework variant (pick one):
A) Vanilla CSS utility class .slide-right applicable to any element.
B) React component — accept delay and duration props, forward a ref.

Edge cases to handle:
- Staggered lists: add animation-delay increments per child so items
  cascade rather than all appearing at once.
- Overflow clipping: the parent container may need overflow: hidden if the
  off-screen position causes horizontal scroll.
- LTR vs RTL: in RTL layouts the start side flips — use
  translateX(100%) in RTL or prefer logical properties where possible.

Return CSS only (no inline styles, no JavaScript).

Why this matters in 2026

Entrance animations guide attention and communicate spatial hierarchy — an element appearing from the left implies it belongs to the reading-direction origin, reinforcing natural left-to-right flow. Pure CSS slide animations replace the JavaScript-heavy scroll-observer patterns that were common a few years ago, removing a runtime dependency entirely. With animation-fill-mode: both, the browser handles the before and after states without any toggling of classes from JS. As reading-direction-aware design becomes more important for internationalised products, understanding which axis and direction your slide uses — and how to flip it for RTL — is an increasingly valuable skill.

The logic

The animation works in two stages. At from, the element is shifted fully off-screen to the left with transform: translateX(-100%) — the negative value moves it leftward by its own width — and made invisible with opacity: 0. At to, both properties return to their natural values. The ease-out timing function starts fast and decelerates toward the end, mimicking how physical objects arrive at a resting position: quick entry, gentle stop. This deceleration makes the motion feel natural rather than mechanical. Using animation-fill-mode: both (via the both keyword in the shorthand) ensures the element stays hidden before the animation starts and remains visible after it ends, even if there is an animation-delay applied for staggering.

Accessibility & performance

Both transform and opacity are compositor-only properties: they are handled entirely on the GPU compositing thread and never trigger layout or paint recalculation. This makes slide-right one of the most performance-efficient animations available in CSS. Always pair any entrance animation with a @media (prefers-reduced-motion: reduce) block that disables or replaces the animation. Users with vestibular disorders or motion sensitivity rely on this preference, and bypassing it can cause genuine discomfort. When staggering multiple elements, keep total animation time under one second so the page does not feel sluggish. If you need to trigger the animation on scroll rather than on page load, a small IntersectionObserver that adds the .slide-right class is all that is required — the CSS does the rest.