Створки

<div class="doors">
  <div class="content">Контент за створками</div>
  <div class="door left"></div>
  <div class="door right"></div>
</div>

<style>
.door { position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: #101318; }                /* 50.5% — нахлёст без щели */
.door.left { left: 0; }
.door.right { right: 0; }
.doors.play .door.left {
  animation: dL .9s cubic-bezier(.7,0,.3,1) .3s forwards; }
.doors.play .door.right {
  animation: dR .9s cubic-bezier(.7,0,.3,1) .3s forwards; }
@keyframes dL { to { transform: translateX(-101%); } }
@keyframes dR { to { transform: translateX(101%); } }
</style>

Сделай переход-створки: два тёмных блока по 50.5% ширины (нахлёст в 1%, чтобы не было щели) закрывают экран; по триггеру левая уезжает translateX(-101%), правая translateX(101%), одновременно, за 0.9s по cubic-bezier(0.7,0,0.3,1) с задержкой 0.3s. Контент за ними проявляется после открытия (задержка 0.8s). Реверс — створки съезжаются обратно. Подходит и для интро, и для переходов между страницами.