バウンドアイコン通知トースト

<div class="stage09-12-07">
          <div class="toast09-12-07">
            <span class="ic09-12-07">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="#fff"><path d="M12 2 15 9l7 1-5 5 1.5 7L12 18.5 5.5 22 7 15 2 10l7-1z"/></svg>
            </span>
            <span class="tx09-12-07">
              <strong>実績を解除しました！</strong>
              <em>「はじめての投稿」バッジを獲得</em>
            </span>
          </div>
        </div>

.d09-12-07{ background:#f5f2fb; }
        .d09-12-07 .stage09-12-07{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-07 .toast09-12-07{
          position:absolute; left:50%; bottom:20px; width:230px;
          transform:translate(-50%,20px); opacity:0;
          display:flex; align-items:center; gap:10px;
          background:#fff; border-radius:12px; padding:11px 14px;
          box-shadow:0 10px 26px rgba(90,40,150,.2);
          transition:opacity .3s ease, transform .3s ease;
        }
        .d09-12-07 .toast09-12-07.show09-12-07{ opacity:1; transform:translate(-50%,0); }
        .d09-12-07 .ic09-12-07{
          flex:none; width:34px; height:34px; border-radius:50%;
          background:linear-gradient(135deg,#f59e0b,#f97316);
          display:flex; align-items:center; justify-content:center;
          box-shadow:0 4px 10px rgba(245,158,11,.45);
        }
        .d09-12-07 .toast09-12-07.show09-12-07 .ic09-12-07{ animation:bounce09-12-07 .7s cubic-bezier(.34,1.56,.64,1); }
        @keyframes bounce09-12-07{
          0%{ transform:scale(.2); }
          55%{ transform:scale(1.25); }
          75%{ transform:scale(.9); }
          100%{ transform:scale(1); }
        }
        .d09-12-07 .tx09-12-07{ display:flex; flex-direction:column; gap:2px; }
        .d09-12-07 .tx09-12-07 strong{ font-size:12.5px; color:#3a2360; }
        .d09-12-07 .tx09-12-07 em{ font-style:normal; font-size:10.6px; color:#8a7aa8; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-07');
        var toast = root.querySelector('.toast09-12-07');
        var icon = root.querySelector('.ic09-12-07');
        function cycle(){
          toast.classList.remove('show09-12-07');
          void icon.offsetWidth;
          requestAnimationFrame(function(){ toast.classList.add('show09-12-07'); });
          setTimeout(function(){ toast.classList.remove('show09-12-07'); }, 2400);
        }
        cycle();
        setInterval(cycle, 3600);
      })();