Add experimental fadeIn animation

owncloud · Jun 17, 2022 · 5e14898 · 5e14898
1 parent f514d1c
commit 5e14898
Showing 1 changed file with 14 additions and 1 deletion.
diff --git 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;
   }