完了/成功ページ

<div class="d09-03-10-wrap">
          <div class="d09-03-10-confetti" aria-hidden="true"></div>
          <svg class="d09-03-10-check" viewBox="0 0 90 90" width="84" height="84" aria-hidden="true">
            <circle cx="45" cy="45" r="40" fill="#e8f7ee" stroke="#3cb371" stroke-width="3"/>
            <path class="d09-03-10-tick" d="M28 46l12 12 22-24" fill="none" stroke="#2e9e57" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <p class="d09-03-10-msg">完了しました！</p>
        </div>

.d09-03-10{background:#f6fbf8;overflow:hidden}
        .d09-03-10-wrap{position:relative;text-align:center}
        .d09-03-10-check{animation:d330bounce .7s cubic-bezier(.28,1.6,.5,1) both}
        @keyframes d330bounce{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
        .d09-03-10-tick{stroke-dasharray:70;stroke-dashoffset:70;animation:d330draw .5s .35s ease forwards}
        @keyframes d330draw{to{stroke-dashoffset:0}}
        .d09-03-10-msg{margin-top:12px;font-weight:700;color:#2e7d52;font-size:17px}
        .d09-03-10-confetti{position:absolute;inset:-24px 0 auto 0;height:0}
        .d09-03-10-piece{position:absolute;top:0;width:8px;height:12px;border-radius:2px;opacity:0;animation:d330fall linear forwards}
        @keyframes d330fall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(210px) rotate(320deg);opacity:0}}

(function(){
        var root=document.getElementById('item-09-03-10');if(!root)return;
        var box=root.querySelector('.d09-03-10-confetti');
        var colors=['#3cb371','#f4c257','#e0698a','#5c9dff','#b07de0'];
        function burst(){
          for(var i=0;i<22;i++){
            var p=document.createElement('span');
            p.className='d09-03-10-piece';
            p.style.left=(8+Math.random()*84)+'%';
            p.style.background=colors[i%colors.length];
            p.style.animationDuration=(1.4+Math.random()*1.2)+'s';
            p.style.animationDelay=(Math.random()*.6)+'s';
            box.appendChild(p);
          }
        }
        function clear(){box.innerHTML='';}
        var io=new IntersectionObserver(function(es){
          es.forEach(function(e){ if(e.isIntersecting){ clear(); burst(); } });
        },{threshold:.4});
        io.observe(root);
      })();