How do I change or add page transitions in Squarespace?

Squarespace 7.1 doesn't have built-in page transitions, but you can add a fade-in effect on page load using CSS animations on the main content area. This gives the impression of smooth page transitions.

Apply the animation to the content wrapper so it fades in when each page loads. Keep the duration short — 0.3 to 0.5 seconds — so it enhances without slowing perceived navigation.

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

.content-wrapper {
  animation: fadeInPage 0.4s ease forwards;
}

/* Don't animate the header or footer */
#header, #footer {
  animation: none !important;
}