animation

CSS Fade-In & Entrance Animations

Smooth fade-in, fade-up, and fade-scale entrance animations using @keyframes and animation-fill-mode.

Entrance animations make content feel intentional and polished rather than appearing abruptly. The fade-up pattern — combining opacity with a small translateY — is the most natural-feeling entrance animation in UI design. Using animation-fill-mode: both ensures the element starts in its 'from' state before the animation begins, preventing a flash of the final state.

Live CSS Editor

CSS

Preview

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.4s ease both;
}

/* Fade up (most natural entrance) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Fade down */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-down {
  animation: fadeInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Fade + scale in */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.fade-in-scale {
  animation: fadeInScale 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Animation delay utilities */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-up, .fade-in-down, .fade-in-scale {
    animation: none;
  }
}

Edit CSS → see live previewTab = 2 spaces

Usage Note

Use animation-fill-mode: both (shorthand keyword 'both') so elements start invisible before the animation begins — without it, elements flash visible for a moment before the keyframe starts. Add animation-delay to stagger multiple elements.