Feat : add cards floating animation

components/CardPreview.vue

@@ -22,6 +22,8 @@ const settingsStore = useSettingsStore()
 
 const childCount = ref<number>(0)
 
+const card = ref<HTMLElement>()
+
 function cardClick() {
     if (!props.card_id) return
     emit("click")
@@ -42,12 +44,17 @@ watch(
         props.wrapped ? rotation.value = (Math.random() * 4) - 2 : rotation.value = Math.random() > .5 ? 2 : -2
     },
     { immediate: true })
+
+
+onMounted(() => {
+    card.value?.style.setProperty("--random-seed", -Math.abs(Math.random() * 2) + 's')
+})
 </script>
 
 <template>
-    <div class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }" @contextmenu.prevent="false"
-        @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''" @mouseenter="mouseenter"
-        @mouseleave="mouseleave">
+    <div ref="card" class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }"
+        @contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
+        @mouseenter="mouseenter" @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
@@ -96,11 +103,29 @@ watch(
     outline-offset: -2px;
 }
 
+@keyframes slidein {
+    from {
+        transform: none;
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    }
+
+    to {
+        transform: translateY(calc(var(--margin-bottom)*-.25));
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) calc(var(--margin-bottom)*1.5) 1px rgba(0, 0, 0, .60));
+    }
+}
+
 .card.unlocked {
     margin-top: 0px;
-
     margin-bottom: var(--margin-bottom);
     filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    animation: 2s infinite alternate ease-in-out slidein;
+    animation-delay: var(--random-seed);
+}
+
+.card.unlocked:hover {
+    animation-play-state: paused;
+    rotate: none !important;
 }
 
 .card.wrapped {