Fade up

<article class="card"><h2>Hello there</h2><p>I fade in and rise into place.</p></article>

.card{width:min(320px,86vw);padding:28px;border-radius:14px;background:#2a1513;border:1px solid #4a2e2a;
  animation:fade-up .8s cubic-bezier(.2,.8,.2,1) both}
.card h2{margin:0 0 8px}
.card p{margin:0;color:#cfc3c1}
@keyframes fade-up{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fade up</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}
.card{width:min(320px,86vw);padding:28px;border-radius:14px;background:#2a1513;border:1px solid #4a2e2a;
  animation:fade-up .8s cubic-bezier(.2,.8,.2,1) both}
.card h2{margin:0 0 8px}
.card p{margin:0;color:#cfc3c1}
@keyframes fade-up{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.card{animation:none}}
</style></head>
<body>
<article class="card"><h2>Hello there</h2><p>I fade in and rise into place.</p></article>
</body></html>