Animated Alert Box Design in HTML CSS

 <div class="container">
    <div class="header">
      <h1>✨ Animated Alert Boxes</h1>
      <p>Beautiful CSS animations for every alert type</p>
    </div>

    <!-- Slide Animations -->
    <div class="section">
      <h2 class="section-title">Slide Animations</h2>
      <div class="alert-grid">
        <div class="alert alert-success slide-in-left">
          <strong>Slide from Left:</strong> This alert slides in from the left side with smooth animation.
        </div>
        <div class="alert alert-info slide-in-right">
          <strong>Slide from Right:</strong> This alert slides in from the right side gracefully.
        </div>
        <div class="alert alert-warning slide-in-top">
          <strong>Slide from Top:</strong> This alert drops down from the top of the screen.
        </div>
        <div class="alert alert-danger slide-in-bottom">
          <strong>Slide from Bottom:</strong> This alert rises up from the bottom smoothly.
        </div>
      </div>
    </div>

    <!-- Fade Animations -->
    <div class="section">
      <h2 class="section-title">Fade Animations</h2>
      <div class="alert-grid">
        <div class="alert alert-gradient success fade-in">
          <strong>Simple Fade In:</strong> A classic fade-in animation for smooth appearance.
        </div>
        <div class="alert alert-gradient info fade-in-up">
          <strong>Fade In Up:</strong> Fades in while sliding upward for elegant entry.
        </div>
        <div class="alert alert-gradient warning fade-in-down">
          <strong>Fade In Down:</strong> Fades in while sliding downward smoothly.
        </div>
      </div>
    </div>

    <!-- Scale & Zoom Animations -->
    <div class="section">
      <h2 class="section-title">Scale & Zoom Animations</h2>
      <div class="alert-grid">
        <div class="alert alert-success scale-in delay-1">
          <strong>Scale In:</strong> Smoothly scales from smaller to full size.
        </div>
        <div class="alert alert-info zoom-in delay-2">
          <strong>Zoom In:</strong> Zooms in dramatically from zero size.
        </div>
        <div class="alert alert-warning bounce-in delay-3">
          <strong>Bounce In:</strong> Bounces into view with playful energy.
        </div>
      </div>
    </div>

    <!-- Icon Alerts with Pop Animation -->
    <div class="section">
      <h2 class="section-title">Animated Icon Alerts</h2>
      <div class="alert-grid">
        <div class="alert alert-success alert-icon slide-in-left">
          <div class="alert-icon-symbol">✓</div>
          <div>
            <strong>Success!</strong> Your payment has been processed successfully. Icons pop in after the alert appears.
          </div>
        </div>
        <div class="alert alert-info alert-icon slide-in-right">
          <div class="alert-icon-symbol">ⓘ</div>
          <div>
            <strong>Information:</strong> New features are now available in your dashboard.
          </div>
        </div>
        <div class="alert alert-warning alert-icon fade-in-up">
          <div class="alert-icon-symbol">⚠</div>
          <div>
            <strong>Warning!</strong> Your subscription will expire in 3 days.
          </div>
        </div>
        <div class="alert alert-danger alert-icon scale-in">
          <div class="alert-icon-symbol">✗</div>
          <div>
            <strong>Error!</strong> Unable to connect to the server. Please try again.
          </div>
        </div>
      </div>
    </div>

    <!-- Rotation Animations -->
    <div class="section">
      <h2 class="section-title">Rotation Animations</h2>
      <div class="alert-grid">
        <div class="alert alert-gradient success flip-in">
          <strong>Flip In:</strong> Flips into view with a 3D perspective effect.
        </div>
        <div class="alert alert-gradient info rotate-in">
          <strong>Rotate In:</strong> Rotates while scaling into position.
        </div>
        <div class="alert alert-gradient warning swing">
          <strong>Swing:</strong> Swings into view like a pendulum motion.
        </div>
      </div>
    </div>

    <!-- Continuous Animations -->
    <div class="section">
      <h2 class="section-title">Continuous Animations</h2>
      <div class="alert-grid">
        <div class="alert alert-success pulse">
          <strong>Pulse:</strong> Continuously pulses to draw attention.
        </div>
        <div class="alert alert-info floating">
          <strong>Floating:</strong> Gently floats up and down infinitely.
        </div>
        <div class="alert alert-warning heartbeat">
          <strong>Heartbeat:</strong> Beats like a heart to emphasize importance.
        </div>
        <div class="alert alert-danger attention">
          <strong>Attention Seeker:</strong> Multiple effects to grab maximum attention!
        </div>
      </div>
    </div>

    <!-- Playful Animations -->
    <div class="section">
      <h2 class="section-title">Playful Animations</h2>
      <div class="alert-grid">
        <div class="alert alert-success shake">
          <strong>Shake:</strong> Shakes horizontally to indicate an error or alert.
        </div>
        <div class="alert alert-info wobble">
          <strong>Wobble:</strong> Wobbles from side to side playfully.
        </div>
        <div class="alert alert-warning jello">
          <strong>Jello:</strong> Wiggles with a jello-like elastic effect.
        </div>
      </div>
    </div>

    <!-- Gradient Alerts with Effects -->
    <div class="section">
      <h2 class="section-title">Gradient Alerts with Combined Effects</h2>
      <div class="alert-grid">
        <div class="alert alert-gradient success slide-in-left glow-pulse">
          🎉 <strong>Achievement Unlocked!</strong> You've completed all daily challenges.
        </div>
        <div class="alert alert-gradient info zoom-in delay-1">
          💡 <strong>Pro Tip:</strong> Use keyboard shortcuts to boost your productivity.
        </div>
        <div class="alert alert-gradient warning bounce-in delay-2">
          ⏰ <strong>Time Sensitive:</strong> Limited time offer expires in 24 hours!
        </div>
        <div class="alert alert-gradient danger shake">
          🔒 <strong>Security Alert:</strong> Suspicious activity detected on your account.
        </div>
      </div>
    </div>

    <!-- Staggered Animation -->
    <div class="section">
      <h2 class="section-title">Staggered Sequential Animations</h2>
      <div class="alert-grid">
        <div class="alert alert-success fade-in-up delay-1">
          <strong>Step 1:</strong> First alert appears with a slight delay.
        </div>
        <div class="alert alert-info fade-in-up delay-2">
          <strong>Step 2:</strong> Second alert follows shortly after.
        </div>
        <div class="alert alert-warning fade-in-up delay-3">
          <strong>Step 3:</strong> Third alert continues the sequence.
        </div>
        <div class="alert alert-danger fade-in-up delay-4">
          <strong>Step 4:</strong> Final alert completes the staggered effect.
        </div>
      </div>
    </div>

  </div>

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 40px 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .header {
      text-align: center;
      color: white;
      margin-bottom: 50px;
      animation: fadeInDown 0.8s ease;
    }

    .header h1 {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 10px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .header p {
      font-size: 1.1rem;
      opacity: 0.95;
    }

    .section {
      background: white;
      border-radius: 20px;
      padding: 40px;
      margin-bottom: 30px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: fadeInUp 0.8s ease;
    }

    .section-title {
      font-size: 1.8rem;
      color: #2c3e50;
      margin-bottom: 30px;
      font-weight: 700;
    }

    .alert-grid {
      display: grid;
      gap: 25px;
    }

    /* Base Alert Styles */
    .alert {
      padding: 18px 24px;
      border-radius: 12px;
      font-size: 15px;
      line-height: 1.6;
      position: relative;
      overflow: hidden;
    }

    .alert::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
    }

    /* Slide In Animations */
    .slide-in-left {
      animation: slideInLeft 0.6s ease;
    }

    @keyframes slideInLeft {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .slide-in-right {
      animation: slideInRight 0.6s ease;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .slide-in-top {
      animation: slideInTop 0.6s ease;
    }

    @keyframes slideInTop {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .slide-in-bottom {
      animation: slideInBottom 0.6s ease;
    }

    @keyframes slideInBottom {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Fade Animations */
    .fade-in {
      animation: fadeIn 0.8s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .fade-in-up {
      animation: fadeInUp 0.8s ease;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in-down {
      animation: fadeInDown 0.8s ease;
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Scale Animations */
    .scale-in {
      animation: scaleIn 0.5s ease;
    }

    @keyframes scaleIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .zoom-in {
      animation: zoomIn 0.5s ease;
    }

    @keyframes zoomIn {
      from {
        transform: scale(0);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Bounce Animation */
    .bounce-in {
      animation: bounceIn 0.8s ease;
    }

    @keyframes bounceIn {
      0% {
        transform: scale(0.3);
        opacity: 0;
      }
      50% {
        transform: scale(1.05);
      }
      70% {
        transform: scale(0.9);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Shake Animation */
    .shake {
      animation: shake 0.6s ease;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }

    /* Pulse Animation */
    .pulse {
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.02);
      }
    }

    /* Glow Pulse Animation */
    .glow-pulse {
      animation: glowPulse 2s infinite;
    }

    @keyframes glowPulse {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
      }
      50% {
        box-shadow: 0 0 20px 10px rgba(40, 167, 69, 0);
      }
    }

    /* Flip Animation */
    .flip-in {
      animation: flipIn 0.6s ease;
    }

    @keyframes flipIn {
      from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
      }
      to {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
      }
    }

    /* Rotate Animation */
    .rotate-in {
      animation: rotateIn 0.6s ease;
    }

    @keyframes rotateIn {
      from {
        transform: rotate(-200deg) scale(0.8);
        opacity: 0;
      }
      to {
        transform: rotate(0) scale(1);
        opacity: 1;
      }
    }

    /* Swing Animation */
    .swing {
      animation: swing 1s ease;
      transform-origin: top center;
    }

    @keyframes swing {
      20% { transform: rotate(15deg); }
      40% { transform: rotate(-10deg); }
      60% { transform: rotate(5deg); }
      80% { transform: rotate(-5deg); }
      100% { transform: rotate(0deg); }
    }

    /* Typing Animation */
    .typing {
      animation: typing 2s steps(40) 1s both;
      overflow: hidden;
      white-space: nowrap;
      border-right: 3px solid;
    }

    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }

    /* Progress Bar Animation */
    .progress-bar {
      position: relative;
      overflow: visible;
    }

    .progress-bar::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      height: 4px;
      background: currentColor;
      animation: progressBar 3s ease-in-out infinite;
    }

    @keyframes progressBar {
      0% { width: 0; }
      50% { width: 100%; }
      100% { width: 0; }
    }

    /* Color Schemes */
    .alert-success {
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .alert-success::before {
      background: #28a745;
    }

    .alert-info {
      background: #d1ecf1;
      color: #0c5460;
      border: 1px solid #bee5eb;
    }

    .alert-info::before {
      background: #17a2b8;
    }

    .alert-warning {
      background: #fff3cd;
      color: #856404;
      border: 1px solid #ffeaa7;
    }

    .alert-warning::before {
      background: #ffc107;
    }

    .alert-danger {
      background: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    .alert-danger::before {
      background: #dc3545;
    }

    /* Gradient Style */
    .alert-gradient {
      color: white;
      border: none;
    }

    .alert-gradient::before {
      display: none;
    }

    .alert-gradient.success {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .alert-gradient.info {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .alert-gradient.warning {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .alert-gradient.danger {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    /* Icon Alerts */
    .alert-icon {
      display: flex;
      align-items: flex-start;
      gap: 15px;
    }

    .alert-icon-symbol {
      font-size: 28px;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      animation: iconPop 0.6s ease 0.2s backwards;
    }

    @keyframes iconPop {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .alert-success .alert-icon-symbol {
      background: #28a745;
      color: white;
    }

    .alert-info .alert-icon-symbol {
      background: #17a2b8;
      color: white;
    }

    .alert-warning .alert-icon-symbol {
      background: #ffc107;
      color: white;
    }

    .alert-danger .alert-icon-symbol {
      background: #dc3545;
      color: white;
    }

    /* Floating Animation */
    .floating {
      animation: floating 3s ease-in-out infinite;
    }

    @keyframes floating {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }

    /* Wobble Animation */
    .wobble {
      animation: wobble 1s ease;
    }

    @keyframes wobble {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-25px) rotate(-5deg); }
      30% { transform: translateX(20px) rotate(3deg); }
      45% { transform: translateX(-15px) rotate(-3deg); }
      60% { transform: translateX(10px) rotate(2deg); }
      75% { transform: translateX(-5px) rotate(-1deg); }
    }

    /* Jello Animation */
    .jello {
      animation: jello 1s ease;
    }

    @keyframes jello {
      0%, 100% { transform: skewX(0deg) skewY(0deg); }
      30% { transform: skewX(25deg) skewY(25deg); }
      40% { transform: skewX(-15deg) skewY(-15deg); }
      50% { transform: skewX(15deg) skewY(15deg); }
      65% { transform: skewX(-5deg) skewY(-5deg); }
      75% { transform: skewX(5deg) skewY(5deg); }
    }

    /* Heartbeat Animation */
    .heartbeat {
      animation: heartbeat 1.5s ease-in-out infinite;
    }

    @keyframes heartbeat {
      0%, 100% { transform: scale(1); }
      10%, 30% { transform: scale(0.9); }
      20%, 40% { transform: scale(1.1); }
    }

    /* Attention Seeker */
    .attention {
      animation: attention 2s ease infinite;
    }

    @keyframes attention {
      0%, 100% {
        transform: scale(1);
      }
      10%, 20% {
        transform: scale(0.95) rotate(-3deg);
      }
      30%, 50%, 70%, 90% {
        transform: scale(1.05) rotate(3deg);
      }
      40%, 60%, 80% {
        transform: scale(1.05) rotate(-3deg);
      }
    }

    /* Delay Classes */
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }

    strong {
      font-weight: 700;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .header h1 {
        font-size: 2rem;
      }

      .section {
        padding: 25px 20px;
      }
    }