Entry/exit transition

Smooth entrance and exit animations using @starting-style and transition-behavior for bidirectional transitions.

I animate on entry and exit

New

animationno-js

Quick implementation

.animated-element {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-behavior: allow-discrete;
}

@starting-style {
  .animated-element {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.animated-element.active {
  opacity: 1;
  transform: translateY(0);
}

/* Exit animation using class toggle */
.animated-element.exit {
  opacity: 0;
  transform: translateY(-20px);
}

Prompt this to your LLM

Includes role, constraints, and entry/exit variants.

You are a senior frontend engineer building UI animations.

Goal: Create smooth entry and exit transitions for UI elements using pure CSS.

Technical constraints:
- Use @starting-style to animate element creation (entrance).
- Use transition-behavior: allow-discrete for exit animations when toggling display.
- Coordinate opacity and transform for GPU-accelerated animations.
- Use cubic-bezier or ease timing with 0.25–0.4s duration.
- Support both one-shot entrance and toggle-based entry/exit.
- Include @media (prefers-reduced-motion: reduce) fallback.
- Handle exit animations before unmounting the element.

Variants:
A) Fade-only entrance (opacity only).
B) Slide-up entrance with fade.
C) Scale-up entrance with fade.
D) Bidirectional entry/exit using class toggle.
E) Staggered entrance for lists using animation-delay.

Edge cases to handle:
- Disabled or reduced-motion preference.
- Exit animation timing (wait for animation end before removing).
- Content that appears too fast for users to notice.

Return CSS only.

Why this matters in 2026

Before @starting-style and transition-behavior, creating smooth bidirectional entry/exit animations required JavaScript or workarounds like adding delays. These new CSS features let you animate element creation and destruction natively, coordinating entrance animations with exit transitions so content appears and disappears gracefully without layout jank.

The logic

@starting-style sets initial styles when an element is first inserted into the DOM, which then transition to their computed values. transition-behavior: allow-discrete enables transitions on properties like display that were previously non-animatable. Together they allow a single class to handle both entry and exit animations cleanly.

Accessibility & performance

Always include a reduced-motion fallback — users with vestibular disorders can experience genuine discomfort from motion. Use GPU-friendly properties (opacity, transform) to avoid layout thrashing. For exit animations, wait for the animationend or transitionend event before removing elements from the DOM to preserve visual continuity.