Spring pop

<div class="pop">✓</div>

.pop{width:140px;height:140px;border-radius:32px;background:linear-gradient(135deg,#f08a5d,#a8523a);
  display:grid;place-items:center;font-size:56px;color:#270100;
  animation:pop .9s cubic-bezier(.34,1.56,.64,1) both; /* fallback */
  animation-timing-function:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}
@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Spring pop</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.pop{width:140px;height:140px;border-radius:32px;background:linear-gradient(135deg,#f08a5d,#a8523a);
  display:grid;place-items:center;font-size:56px;color:#270100;
  animation:pop .9s cubic-bezier(.34,1.56,.64,1) both; /* fallback */
  animation-timing-function:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}
@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}
</style></head>
<body><div class="pop">✓</div></body></html>