diff --git a/js/src/toast.js b/js/src/toast.js
index 23d482d35f..471d11aebe 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -29,9 +29,10 @@ const Event = {
 }
 
 const ClassName = {
-  FADE : 'fade',
-  HIDE : 'hide',
-  SHOW : 'show'
+  FADE    : 'fade',
+  HIDE    : 'hide',
+  SHOW    : 'show',
+  SHOWING : 'showing'
 }
 
 const DefaultType = {
@@ -84,6 +85,9 @@ class Toast {
     }
 
     const complete = () => {
+      this._element.classList.remove(ClassName.SHOWING)
+      this._element.classList.add(ClassName.SHOW)
+
       $(this._element).trigger(Event.SHOWN)
 
       if (this._config.autohide) {
@@ -91,7 +95,8 @@ class Toast {
       }
     }
 
-    this._element.classList.add(ClassName.SHOW)
+    this._element.classList.remove(ClassName.HIDE)
+    this._element.classList.add(ClassName.SHOWING)
     if (this._config.animation) {
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
@@ -162,11 +167,11 @@ class Toast {
 
   _close() {
     const complete = () => {
+      this._element.classList.add(ClassName.HIDE)
       $(this._element).trigger(Event.HIDDEN)
     }
 
     this._element.classList.remove(ClassName.SHOW)
-
     if (this._config.animation) {
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index d6ba4ca141..c5fde797b9 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,5 +1,4 @@
 .toast {
-  display: none;
   max-width: $toast-max-width;
   overflow: hidden; // cheap rounded corners on nested items
   font-size: $toast-font-size; // knock it down to 14px
@@ -9,13 +8,23 @@
   border-radius: $toast-border-radius;
   box-shadow: $toast-box-shadow;
   backdrop-filter: blur(10px);
+  opacity: 0;
 
   + .toast {
     margin-top: $toast-padding-x;
   }
 
+  &.showing {
+    opacity: 1;
+  }
+
   &.show {
     display: block;
+    opacity: 1;
+  }
+
+  &.hide {
+    display: none;
   }
 }