How can I create CSS toast notification animations?

How can I create CSS toast notification animations?

You can create toast notification animations using CSS transitions and keyframes. Would you like a code example?

Yes, please! A simple fade-in and fade-out effect would be great.

Here's a basic example:

.toast {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.toast.show {
  opacity: 1;
}

.toast.hide {
  opacity: 0;
}

You can add the 'show' class when you want to display it and 'hide' when you want to remove it.

That looks good! How do I trigger the animation with JavaScript?

You can use JavaScript to add and remove the classes. For example:

const toast = document.querySelector('.toast');

function showToast() {
  toast.classList.add('show');
  setTimeout(() => {
    toast.classList.remove('show');
  }, 3000); // Adjust time as needed
}

Call showToast() to display the notification.