@datagouv/vue-toaster/src/themes/default/animations.css

Vue 3 toaster notification

/* 
Animations are taken from animate.css
https://daneden.github.io/animate.css
*/

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

/* VUE */

.fade-enter-active {
  transition: opacity 300ms ease-in;
}
.fade-leave-active {
  transition: opacity 150ms ease-out
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}