diff --git a/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue b/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue
index b75b43819..7dfe496f3 100644
--- a/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue
+++ b/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue
@@ -1,6 +1,8 @@
 <template>
   <div
-    class="oc-alert oc-flex oc-flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded oc-p-m"
+    class="
+      oc-alert oc-flex oc-flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded oc-p-m
+    "
     :class="classes"
   >
     <div class="oc-flex oc-flex-wrap oc-flex-middle oc-flex-1" :role="role" :aria-live="ariaLive">
@@ -116,7 +118,18 @@ export default {
   margin-top: var(--oc-space-small);
   position: relative;
   word-break: break-word;
+  animation: fadeIn 0.3s;
 
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
   &-title {
     font-size: 1.15rem;
   }