diff --git a/ghost/portal/src/components/Notification.styles.js b/ghost/portal/src/components/Notification.styles.js
index 10452b416d..a9f641c9bf 100644
--- a/ghost/portal/src/components/Notification.styles.js
+++ b/ghost/portal/src/components/Notification.styles.js
@@ -19,8 +19,11 @@ const NotificationStyles = `
         color: var(--white);
         border-radius: 5px;
         box-shadow: 0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px -5px rgba(0, 0, 0, 0.12);
-        animation: notification-slidein 0.6s ease-in-out,
-                    notification-slideout 0.6s ease-in-out 2s;
+        animation: notification-slidein 0.6s ease-in-out;
+    }
+
+    .gh-portal-notification.slideout {
+        animation: notification-slideout 0.6s ease-in-out;
     }
 
     .gh-portal-notification p {
diff --git a/ghost/portal/src/components/common/PopupNotification.js b/ghost/portal/src/components/common/PopupNotification.js
index 3dc7636167..299c23a0b1 100644
--- a/ghost/portal/src/components/common/PopupNotification.js
+++ b/ghost/portal/src/components/common/PopupNotification.js
@@ -17,8 +17,11 @@ export const PopupNotificationStyles = `
                     0px 2.2538793087005615px 2.2538793087005615px 0px rgba(0,0,0,0.02), 
                     0px 5.426473140716553px 5.426473140716553px 0px rgba(0,0,0,0.03),  
                     0px 18px 18px 0px rgba(0,0,0,0.04);
-        animation: popupnotification-slidein 0.6s ease-in-out,
-                    popupnotification-slideout 0.6s ease-in-out 2s;
+        animation: popupnotification-slidein 0.6s ease-in-out;
+    }
+
+    .gh-portal-popupnotification.slideout {
+        animation: popupnotification-slideout 0.6s ease-in-out;
     }
 
     .gh-portal-popupnotification p {