From fe8725fc885eaf47c1e15c5d82df4c0f25aa214c Mon Sep 17 00:00:00 2001
From: mappi <mappi@mizuiromoon.com>
Date: Sun, 4 Jun 2023 22:40:09 +0900
Subject: [PATCH] add animation

---
 packages/frontend/src/pages/user/home.vue | 35 +++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 201340e895..c38d1600bf 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -114,11 +114,11 @@
 						</template>
 						<template v-else>
 							<div>
-								<i class="ti ti-lock"></i>
+								<i class="ti ti-lock" :class="{[$style.animation]: animation}"></i>
 								<span>{{ i18n.ts.following }}</span>
 							</div>
 							<div>
-								<i class="ti ti-lock"></i>
+								<i class="ti ti-lock" :class="{[$style.animation]: animation}"></i>
 								<span>{{ i18n.ts.followers }}</span>
 							</div>
 						</template>
@@ -171,6 +171,7 @@ import { confetti } from '@/scripts/confetti';
 import MkNotes from '@/components/MkNotes.vue';
 import { api } from '@/os';
 import { isFfVisibility } from '@/scripts/is-ff-visibility';
+import { defaultStore } from '@/store';
 
 const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
 const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
@@ -218,6 +219,8 @@ const age = $computed(() => {
 	return calcAge(props.user.birthday);
 });
 
+const animation = $ref(defaultStore.state.animation);
+
 function menu(ev) {
 	os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
 }
@@ -679,4 +682,32 @@ onUnmounted(() => {
     border-radius: var(--radius);
     overflow: clip;
 }
+
+@keyframes keywiggle {
+    0% { transform: translate(-3px,-1px) rotate(-8deg); }
+    5% { transform: translateY(-1px) rotate(-10deg); }
+    10% { transform: translate(1px,-3px) rotate(0); }
+    15% { transform: translate(1px,1px) rotate(11deg); }
+    20% { transform: translate(-2px,1px) rotate(1deg); }
+    25% { transform: translate(-1px,-2px) rotate(-2deg); }
+		30% { transform: translate(-1px,2px) rotate(-3deg); }
+    35% { transform: translate(2px,1px) rotate(6deg); }
+    40% { transform: translate(-2px,-3px) rotate(-9deg); }
+    45% { transform: translateY(-1px) rotate(-12deg); }
+    50% { transform: translate(1px,2px) rotate(10deg); }
+    55% { transform: translateY(-3px) rotate(8deg); }
+    60% { transform: translate(1px,-1px) rotate(8deg); }
+    65% { transform: translateY(-1px) rotate(-7deg); }
+    70% { transform: translate(-1px,-3px) rotate(6deg); }
+    75% { transform: translateY(-2px) rotate(4deg); }
+    80% { transform: translate(-2px,-1px) rotate(3deg); }
+    85% { transform: translate(1px,-3px) rotate(-10deg); }
+    90% { transform: translate(1px) rotate(3deg); }
+    95% { transform: translate(-2px) rotate(-3deg); }
+    to { transform: translate(2px,1px) rotate(2deg); }
+}
+
+.animation:hover {
+	animation: keywiggle 1s;
+}
 </style>