CSS View Transition Generator

/* Add this to your CSS */

::view-transition-old(header),
::view-transition-new(header) {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}

::view-transition-old(header) {
  animation-name: slide-out-up;
}

::view-transition-new(header) {
  animation-name: slide-in-up;
}

/* Keyframes */

@keyframes slide-out-up {
  to { transform: translateY(-100%); opacity: 0; }
}

@keyframes slide-in-up {
  from { transform: translateY(100%); opacity: 0; }
}

@keyframes slide-out-down {
  to { transform: translateY(100%); opacity: 0; }
}

@keyframes slide-in-down {
  from { transform: translateY(-100%); opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

<!-- Add view-transition-name to your elements -->

<div style="view-transition-name: header">
  Your content here
</div>

<!-- JavaScript to trigger transition -->
<script>
  function updateContent() {
    if (!document.startViewTransition) {
      // Fallback for browsers that don't support View Transitions
      doUpdate();
      return;
    }

    document.startViewTransition(() => {
      doUpdate();
    });
  }

  function doUpdate() {
    // Update your DOM here
  }
</script>