液体モーフィング(ブロブ)遷移

<div class="d08-04-12-stage">
          <div class="d08-04-12-page d08-04-12-a">
            <strong>お知らせ一覧</strong>
            <p>最新情報をチェック</p>
          </div>
          <div class="d08-04-12-page d08-04-12-b">
            <strong>お知らせ詳細</strong>
            <p>本文を表示</p>
          </div>
          <span class="d08-04-12-blob"></span>
          <button type="button" class="d08-04-12-btn">次のページへ</button>
        </div>

.prev.d08-04-12{padding:0;}
        .d08-04-12-stage{position:absolute;inset:0;overflow:hidden;font-family:sans-serif;}
        .d08-04-12-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;transition:opacity .1s linear;}
        .d08-04-12-a{background:linear-gradient(135deg,#059669,#047857);z-index:2;}
        .d08-04-12-b{background:linear-gradient(135deg,#db2777,#be185d);z-index:1;opacity:0;}
        .d08-04-12-stage.is-b .d08-04-12-a{opacity:0;z-index:1;}
        .d08-04-12-stage.is-b .d08-04-12-b{opacity:1;z-index:2;}
        .d08-04-12-blob{position:absolute;left:50%;top:50%;width:40px;height:40px;background:#fff;transform:translate(-50%,-50%) scale(0);border-radius:60% 40% 55% 45%/45% 55% 40% 60%;z-index:5;transition:transform .65s cubic-bezier(.65,0,.35,1),border-radius .65s ease;pointer-events:none;}
        .d08-04-12-stage.is-cover .d08-04-12-blob{transform:translate(-50%,-50%) scale(20);border-radius:38% 62% 41% 59%/52% 44% 56% 48%;}
        .d08-04-12-page strong{font-size:18px;}
        .d08-04-12-page p{font-size:12px;margin:0;opacity:.85;}
        .d08-04-12-btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;border:none;border-radius:999px;padding:6px 16px;font-size:12px;background:#fff;color:#333;cursor:pointer;}

(function(){
          var root=document.getElementById('item-08-04-12');
          if(!root) return;
          var stage=root.querySelector('.d08-04-12-stage');
          var btn=root.querySelector('.d08-04-12-btn');
          var on=false, busy=false;
          btn.addEventListener('click',function(){
            if(busy) return;
            busy=true;
            stage.classList.add('is-cover');
            setTimeout(function(){
              on=!on;
              stage.classList.toggle('is-b',on);
              btn.textContent=on?'一覧へ戻る':'次のページへ';
              stage.classList.remove('is-cover');
              busy=false;
            },650);
          });
        })();