OGP風プレビューカード フェードイン

<div class="d06-14-06-wrap">
          <div class="d06-14-06-card">
            <div class="d06-14-06-thumb"></div>
            <div class="d06-14-06-body">
              <p class="d06-14-06-title">記事タイトルがここに入ります</p>
              <p class="d06-14-06-desc">OGP風の説明文がここに表示されるプレビューカードです。</p>
              <span class="d06-14-06-domain">example.com</span>
            </div>
          </div>
          <button class="d06-14-06-btn" type="button">このカードをシェア</button>
        </div>

.d06-14-06-wrap { width:100%; max-width:240px; display:flex; flex-direction:column; align-items:center; gap:8px; }
        .d06-14-06-card { width:100%; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease, box-shadow .3s ease, border-color .3s ease; }
        .d06-14-06-card.is-in { opacity:1; transform:translateY(0); }
        .d06-14-06-card.is-shared { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.18); }
        .d06-14-06-thumb { height:80px; background:linear-gradient(135deg,#a5b4fc,#f0abfc); }
        .d06-14-06-body { padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
        .d06-14-06-title { font-size:13px; font-weight:700; color:#1f2937; margin:0; }
        .d06-14-06-desc { font-size:11px; color:#6b7280; margin:0; }
        .d06-14-06-domain { font-size:10px; color:#9ca3af; text-transform:uppercase; letter-spacing:.03em; }
        .d06-14-06-btn { border:none; border-radius:999px; background:#3b82f6; color:#fff; padding:7px 14px; font-size:11.5px; font-weight:700; cursor:pointer; }

(function(){
          var root = document.querySelector('.d06-14-06');
          var card = root.querySelector('.d06-14-06-card');
          var btn = root.querySelector('.d06-14-06-btn');
          setTimeout(function(){ card.classList.add('is-in'); }, 250);
          btn.addEventListener('click', function(){
            card.classList.remove('is-shared');
            void card.offsetWidth;
            card.classList.add('is-shared');
          });
        })();