メッセージ送信アニメ

<div class="d10-03-03-app">
          <div class="d10-03-03-feed" id="d10-03-03-feed">
            <div class="d10-03-03-row d10-03-03-left"><div class="d10-03-03-bub">やっほー！</div></div>
            <div class="d10-03-03-row d10-03-03-right"><div class="d10-03-03-bub d10-03-03-me">元気だよ〜</div></div>
          </div>
          <div class="d10-03-03-bar">
            <input type="text" class="d10-03-03-in" id="d10-03-03-in" placeholder="メッセージを入力…">
            <button class="d10-03-03-send" id="d10-03-03-send" aria-label="送信">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="#fff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
            </button>
          </div>
        </div>

.d10-03-03 .d10-03-03-app{width:240px;display:flex;flex-direction:column;border:1px solid #e6e9ef;border-radius:14px;overflow:hidden;font-size:12px}
        .d10-03-03 .d10-03-03-feed{padding:10px;display:flex;flex-direction:column;gap:8px;height:150px;overflow-y:auto;background:#f7f9fc}
        .d10-03-03 .d10-03-03-row{display:flex}
        .d10-03-03 .d10-03-03-right{justify-content:flex-end}
        .d10-03-03 .d10-03-03-bub{max-width:160px;padding:7px 10px;border-radius:13px;line-height:1.5;background:#eef1f5;color:#333;border-bottom-left-radius:4px}
        .d10-03-03 .d10-03-03-me{background:linear-gradient(135deg,#6a8bff,#8a6cff);color:#fff;border-bottom-left-radius:13px;border-bottom-right-radius:4px}
        .d10-03-03 .d10-03-03-new{animation:d273pop .35s ease}
        .d10-03-03 .d10-03-03-bar{display:flex;gap:6px;padding:8px;border-top:1px solid #e6e9ef;background:#fff}
        .d10-03-03 .d10-03-03-in{flex:1;min-width:0;border:1px solid #e6e9ef;border-radius:16px;padding:6px 10px;font-size:12px;outline:none}
        .d10-03-03 .d10-03-03-in:focus{border-color:#8a6cff}
        .d10-03-03 .d10-03-03-send{flex:0 0 auto;width:30px;height:30px;border:none;border-radius:50%;background:linear-gradient(135deg,#6a8bff,#8a6cff);cursor:pointer;display:flex;align-items:center;justify-content:center}
        @keyframes d273pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

(function(){
        var feed=document.getElementById('d10-03-03-feed'),inp=document.getElementById('d10-03-03-in'),btn=document.getElementById('d10-03-03-send');
        function send(){
          var v=inp.value.trim();if(!v)return;
          var row=document.createElement('div');row.className='d10-03-03-row d10-03-03-right';
          var b=document.createElement('div');b.className='d10-03-03-bub d10-03-03-me d10-03-03-new';b.textContent=v;
          row.appendChild(b);feed.appendChild(row);feed.scrollTop=feed.scrollHeight;inp.value='';inp.focus();
        }
        btn.addEventListener('click',send);
        inp.addEventListener('keydown',function(e){if(e.key==='Enter')send();});
      })();