Cover transition

<div class="stage"><div class="s a">A</div><div class="scrim"></div><div class="s b over">B</div></div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 clamp(16px,6vmin,30px)/1 sans-serif;color:#fff;letter-spacing:.04em}
.a{background:linear-gradient(135deg,#3b3b98,#1e1e4a)}
.b{background:linear-gradient(135deg,#f25c8a,#c9184a)}
.scrim{position:absolute;inset:0;background:#000;opacity:0;animation:scrim 3.6s ease infinite}
.over{animation:cover 3.6s cubic-bezier(.2,.8,.2,1) infinite;box-shadow:0 0 30px rgba(0,0,0,.5)}
@keyframes cover{0%,15%{transform:translateY(100%)}40%,70%{transform:translateY(0)}95%,100%{transform:translateY(100%)}}
@keyframes scrim{0%,15%{opacity:0}40%,70%{opacity:.4}95%,100%{opacity:0}}