点滅アラートアイコン

<div class="d08-11-03-stage">
          <button class="d08-11-03-trigger" type="button">警告を表示</button>
          <div class="d08-11-03-alert">
            <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true"><path d="M12 3 1 21h22L12 3z" fill="currentColor"/><rect x="11" y="9" width="2" height="6" fill="#fff"/><rect x="11" y="16.5" width="2" height="2" fill="#fff"/></svg>
            <span class="d08-11-03-txt">要確認：残り容量わずかです</span>
          </div>
        </div>

.d08-11-03-stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
        .d08-11-03-trigger{background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;padding:11px 24px;font-size:14px;font-weight:700;color:#2a2d3a;cursor:pointer}
        .d08-11-03-trigger:hover{border-color:#ffb020}
        .d08-11-03-alert{display:flex;align-items:center;gap:8px;color:#c7c9d4;background:#f7f7fa;border-radius:10px;padding:9px 14px;transition:color .3s,background .3s}
        .d08-11-03-alert svg{flex-shrink:0}
        .d08-11-03-txt{font-size:12px;font-weight:700;color:inherit}
        .d08-11-03-alert.is-warn{animation:d08-11-03-blink 1.2s steps(1,end) 1}
        .d08-11-03-alert.is-active{color:#ff3b52;background:#ffecec}
        @keyframes d08-11-03-blink{0%,100%{color:#ff3b52;background:#ffe3e5}16.6%{color:#ffb3ba;background:#fff6f6}33.3%{color:#ff3b52;background:#ffe3e5}50%{color:#ffb3ba;background:#fff6f6}66.6%{color:#ff3b52;background:#ffe3e5}83.3%{color:#ffb3ba;background:#fff6f6}}

(function(){
        var trigger=document.querySelector('#item-08-11-03 .d08-11-03-trigger');
        var alert=document.querySelector('#item-08-11-03 .d08-11-03-alert');
        if(!trigger||!alert)return;
        var resetTimer=null,clearTimer=null;
        trigger.addEventListener('click',function(){
          if(resetTimer)clearTimeout(resetTimer);
          if(clearTimer)clearTimeout(clearTimer);
          alert.classList.remove('is-active');
          alert.classList.remove('is-warn');void alert.offsetWidth;alert.classList.add('is-warn');
          resetTimer=setTimeout(function(){
            alert.classList.remove('is-warn');alert.classList.add('is-active');
            clearTimer=setTimeout(function(){alert.classList.remove('is-active');},2600);
          },1200);
        });
      })();