Toast with auto exit

<div class="toast"><strong>Saved</strong><span>Your changes are live. Hover to pause.</span></div>

body{overflow:hidden}
.toast{position:relative;overflow:hidden;width:min(320px,88vw);padding:16px 18px;border-radius:12px;background:#2a1513;border:1px solid #4a2e2a;
  animation:toast 4s cubic-bezier(.2,.8,.2,1) both infinite}
.toast:hover,.toast:hover::after{animation-play-state:paused}
.toast strong{display:block}.toast span{color:#cfc3c1;font-size:14px}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#f08a5d;transform-origin:left;
  animation:drain 3.2s linear .5s both infinite}
@keyframes toast{
  0%{opacity:0;transform:translateY(40px) scale(.96)}
  10%,82%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-30px) scale(.96)}
}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.toast,.toast::after{animation:none}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Toast</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}
body{overflow:hidden}
.toast{position:relative;overflow:hidden;width:min(320px,88vw);padding:16px 18px;border-radius:12px;background:#2a1513;border:1px solid #4a2e2a;
  animation:toast 4s cubic-bezier(.2,.8,.2,1) both infinite}
.toast:hover,.toast:hover::after{animation-play-state:paused}
.toast strong{display:block}.toast span{color:#cfc3c1;font-size:14px}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#f08a5d;transform-origin:left;
  animation:drain 3.2s linear .5s both infinite}
@keyframes toast{
  0%{opacity:0;transform:translateY(40px) scale(.96)}
  10%,82%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-30px) scale(.96)}
}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.toast,.toast::after{animation:none}}
</style></head>
<body><div class="toast"><strong>Saved</strong><span>Your changes are live. Hover to pause.</span></div></body></html>