積み重なるトーストスタック

<div class="stage09-12-02">
          <div class="stack09-12-02"></div>
        </div>

.d09-12-02{ background:#f5f6fa; }
        .d09-12-02 .stage09-12-02{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-02 .stack09-12-02{
          position:absolute; right:14px; bottom:14px; width:206px;
          display:flex; flex-direction:column-reverse; gap:8px;
        }
        .d09-12-02 .card09-12-02{
          background:#fff; border-radius:10px; padding:10px 12px;
          box-shadow:0 8px 20px rgba(20,30,50,.16);
          font-size:11.5px; color:#2b3444; border-left:3px solid #6366f1;
          opacity:0; transform:translateY(10px) scale(.96);
          transition:opacity .35s ease, transform .35s ease, max-height .35s ease;
          max-height:60px;
        }
        .d09-12-02 .card09-12-02.show09-12-02{ opacity:1; transform:translateY(0) scale(1); }
        .d09-12-02 .card09-12-02.hide09-12-02{ opacity:0; transform:translateX(30px); max-height:0; padding-top:0; padding-bottom:0; margin-top:-8px; overflow:hidden; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-02');
        var stack = root.querySelector('.stack09-12-02');
        var msgs = ['新しいコメントが届きました','注文が確定しました','在庫が更新されました','タスクが完了しました','新規メンバーが参加しました'];
        var i = 0;
        function spawn(){
          var el = document.createElement('div');
          el.className = 'card09-12-02';
          el.textContent = msgs[i % msgs.length];
          i++;
          stack.insertBefore(el, stack.firstChild);
          while(stack.children.length > 3){ stack.removeChild(stack.lastChild); }
          requestAnimationFrame(function(){
            requestAnimationFrame(function(){ el.classList.add('show09-12-02'); });
          });
          setTimeout(function(){
            el.classList.add('hide09-12-02');
            el.classList.remove('show09-12-02');
            setTimeout(function(){ if(el.parentNode){ el.parentNode.removeChild(el); } }, 400);
          }, 3200);
        }
        spawn();
        setInterval(spawn, 1500);
      })();