CSS 토스트 알림 컴포넌트

상태별(성공, 에러, 경고, 정보) 알림과 자동 사라짐 애니메이션이 포함된 토스트 컴포넌트입니다.

toastnotificationanimationcss-only
Gist 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
  :root {
    --bg-dark: #121212;
    --success: #4caf50;
    --error: #f44336;
    --warning: #ff9800;
    --info: #2196f3;
    --text: #ffffff;
  }
  body {
    background: var(--bg-dark);
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
  }
  .toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }
  .toast {
    min-width: 300px;
    padding: 16px;
    border-radius: 8px;
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
    position: relative;
    overflow: hidden;
  }
  .toast::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: rgba(255,255,255,0.3);
    animation: progress 5s linear forwards;
  }
  .toast.success { background: var(--success); }
  .toast.error { background: var(--error); }
  .toast.warning { background: var(--warning); }
  .toast.info { background: var(--info); }

  @keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @keyframes fadeOut {
    to { transform: translateX(20px); opacity: 0; }
  }
  @keyframes progress {
    from { width: 100%; }
    to { width: 0%; }
  }
</style>
</head>
<body>
  <div class="toast-container">
    <div class="toast success">성공: 작업이 완료되었습니다.</div>
    <div class="toast error">에러: 오류가 발생했습니다.</div>
    <div class="toast warning">경고: 주의가 필요합니다.</div>
    <div class="toast info">정보: 새로운 소식이 있습니다.</div>
  </div>
</body>
</html>