Page entrance animations: fade + slide

The "appear smoothly on page load" pattern

@keyframes appear {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero h1 { animation: appear 0.6s ease-out forwards; }
.hero p  { animation: appear 0.6s ease-out 0.15s forwards; }   /* 150ms delay */
.hero .cta { animation: appear 0.6s ease-out 0.30s forwards; } /* 300ms delay */

Stagger the delays

Children of the hero each get a slightly LATER animation-delay. The cascade creates a "drift" effect — your eye follows from h1 → p → CTA.

50-200ms between each is the sweet spot. Less feels simultaneous; more feels disconnected.

Backwards fill-mode

.hero h1 { animation: appear 0.6s ease-out backwards; }

Without backwards, the element FLASHES into the "to" state for a frame before the animation runs (because the from state hasn't applied yet). backwards makes the browser apply the from state immediately, fixing the flash.

forwards keeps the FINAL state after the animation. backwards applies the INITIAL state before the animation. both does both — common combo.

reduced-motion alternative

For users who opted out, show the element instantly with NO motion but in the final visual state:

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero p, .hero .cta { animation: none; opacity: 1; }
}