클레이모피즘

<div class="tray">
  <div class="clay a" id="c1"></div>
  <div class="clay b" id="c2">✓</div>
  <div class="clay c" id="c3"></div>
</div>

body{background:#eef2fb}
.tray{display:flex;gap:22px;align-items:center}
.clay{border-radius:40% 60% 55% 45%/50% 40% 60% 50%;display:grid;place-items:center;
  color:#fff;font-size:22px;font-weight:800;transition:transform 1.6s ease-in-out}
.a{width:70px;height:70px;background:linear-gradient(145deg,#b9c6ff,#8aa0f2);
  box-shadow:10px 10px 22px rgba(120,140,220,.45),-8px -8px 18px #ffffff,inset 2px 2px 6px rgba(255,255,255,.6)}
.b{width:92px;height:92px;background:linear-gradient(145deg,#ffd3ea,#ff9fc9);
  box-shadow:12px 12px 26px rgba(230,140,180,.5),-8px -8px 18px #ffffff,inset 2px 2px 6px rgba(255,255,255,.6)}
.c{width:56px;height:56px;background:linear-gradient(145deg,#c9f3d8,#8fe0ae);
  box-shadow:8px 8px 18px rgba(130,200,150,.45),-6px -6px 14px #ffffff,inset 2px 2px 6px rgba(255,255,255,.6)}
.bounce{transform:translateY(-10px)}

const items = [document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3')];
items.forEach((el, i) => {
  setInterval(() => {
    el.classList.toggle('bounce');
  }, 1200 + i * 220);
});