chore: add enter-animation for banner

jiazengp · Jul 29, 2023 · 89b7e5f · 89b7e5f
1 parent 5a77074
commit 89b7e5f
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue
@@ -69,6 +69,8 @@ const hideBanner = () => {
   color: #fff;
   display: flex;
   justify-content: space-between;
+  animation: slide-enter-inverse 1s both 1;
+  animation-delay: 0.3s;
 }
 
 .text {
@@ -97,4 +99,16 @@ svg {
   height: 20px;
   margin-left: 8px;
 }
+
+@keyframes slide-enter-inverse {
+  0% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0px);
+    opacity: 100;
+  }
+}
 </style>