줌 트랜지션

<div class="stage">
  <div class="scene a">SCENE A</div>
  <div class="scene b">SCENE B</div>
</div>

.stage{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 clamp(16px,6vmin,32px)/1 sans-serif;color:#fff;letter-spacing:.03em;filter:blur(0px)}
.a{background:radial-gradient(circle at 50% 50%,#3a2a5c,#17101f);animation:zoom-a 2.8s ease-in infinite}
.b{background:radial-gradient(circle at 50% 50%,#1a3a3a,#0c1a1a);animation:zoom-b 2.8s ease-out infinite}
@keyframes zoom-a{
  0%{transform:scale(1);filter:blur(0px);opacity:1}
  46%{transform:scale(2.6);filter:blur(10px);opacity:1}
  50%{transform:scale(2.6);filter:blur(10px);opacity:0}
  100%{transform:scale(1);filter:blur(0px);opacity:0}
}
@keyframes zoom-b{
  0%{transform:scale(2.6);filter:blur(10px);opacity:0}
  50%{transform:scale(2.6);filter:blur(10px);opacity:1}
  54%{transform:scale(1);filter:blur(0px);opacity:1}
  100%{transform:scale(1);filter:blur(0px);opacity:1}
}