Rotate in

Quick implementation

.rotate-in {
  animation: rotate-in 0.6s ease-out both;
}

@keyframes rotate-in {
  from {
    transform: rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-in {
    animation: none;
  }
}

Prompt this to your LLM

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

You are a senior frontend engineer building an animated UI.

Goal: A CSS rotate-in entrance animation that spins elements from -180deg
to 0deg while fading in — no JavaScript required.

Technical constraints:
- Use @keyframes rotate-in with transform: rotate(-180deg) and opacity: 0
  in the from state, and rotate(0deg) with opacity: 1 in the to state.
- Apply animation: rotate-in 0.6s ease-out both to the target element.
- Use transform-origin: center to control the pivot point (or adjust
  for alternative pivot effects like top, bottom-left, etc.).
- All colors must be in oklch() — no hex, rgb, or hsl.
- Include @media (prefers-reduced-motion: reduce) that disables the animation.

Framework variant (pick one):
A) Vanilla CSS utility class .rotate-in applicable to any element.
B) React component — accepts children and an optional delay prop.

Edge cases to handle:
- Elements that contain text may appear blurry mid-rotation in some
  browsers — set will-change: transform to hint the compositor.
- Staggered children: use animation-delay on each child rather than
  re-triggering the parent animation.
- The animation-fill-mode: both (covered by the both shorthand keyword)
  ensures the element starts invisible before the animation fires.
- If transform-origin is not center, account for layout shift from
  the rotation pivot moving the bounding box visually.

Return CSS only.

Why this matters in 2026

Entrance animations give interfaces personality and direct user attention. A rotation combined with a fade-in is far more dramatic than a simple fade alone — it communicates energy and sequence. Because CSS handles the animation entirely on the compositor thread, there is no need for JavaScript animation libraries like GSAP or Framer Motion for this effect, keeping bundles lean and performance high.

The logic

The rotate-in keyframe starts the element at rotate(-180deg) and opacity: 0, then transitions to rotate(0deg) and opacity: 1. The ease-out timing function means the element decelerates as it lands on its final position, mimicking natural physics and giving the animation a satisfying snap. The transform-origin property controls the pivot point for the rotation — the default center spins the element around its own middle, but shifting the origin to top left or bottom creates entirely different visual characters. The both fill mode keeps the element invisible before the animation starts and holds the final state once it ends, preventing flicker.

Accessibility & performance

Rotation is a compositor-only operation alongside opacity, meaning the browser can hand it off to the GPU without triggering layout or paint. This makes it one of the most performant animation techniques available. However, rotation can cause significant discomfort for users with vestibular disorders — spinning elements may trigger nausea or dizziness. The @media (prefers-reduced-motion: reduce) block is not optional; it must be included and must fully disable the animation for users who have opted into reduced motion in their OS settings.