‘hide’ animation is not displaying for toast

I’m having some trouble getting my ‘hide’ animation to work for my toasts. The ‘show’ animation works as expected when the toast appears, but the ‘hide’ animation fails to display and the toast simply disappears. I can see that the classes are being added correctly when logging things out. I have also tried using an ‘animationEnd’ event listener but have not been able to get it to work.

CSS:

  #toast-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    max-width: 25%;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align items to the right */
  }

  .toast {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    background-color: var(--page-accent-color);
    padding: 10px;
    border-radius: 10px;
    opacity: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    display: inline-block;
    margin-top: 5px;
  }
  
  .toast.show {
    animation: fade-in 0.5s ease-in-out forwards;
  }

  .toast.hide {
    animation: fade-out 0.5s ease-in-out forwards;
  }

  .toast-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .toast-message {}

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

JavaScript:

function showToast(title = '', message, time = 5000) {
    const toastContainer = document.getElementById('toast-container');
    const toast = document.createElement('div');
    toast.className = 'toast';

    // Create title element if title is provided
    if (title) {
      const titleElement = document.createElement('div');
      titleElement.className = 'toast-title';
      titleElement.innerHTML = title;
      toast.appendChild(titleElement);
    }

    const messageElement = document.createElement('div');
    messageElement.className = 'toast-message';
    messageElement.innerHTML = message;
    toast.appendChild(messageElement);
    toastContainer.appendChild(toast);
    toast.classList.add('show');
    
    setTimeout(() => {
      toast.classList.add('hide');
    }, time);
  }