From 25206332107ad9da74488b466e5821fda6202906 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 18 Dec 2022 00:49:28 +0100
Subject: [PATCH] client: move MFM animations to MFM component

---
 .../global/misskey-flavored-markdown.vue      |  7 +++
 packages/client/src/components/mfm.ts         |  2 +-
 packages/client/src/style.scss                | 43 -------------------
 3 files changed, 8 insertions(+), 44 deletions(-)

diff --git a/packages/client/src/components/global/misskey-flavored-markdown.vue b/packages/client/src/components/global/misskey-flavored-markdown.vue
index 06a8509ab..72ab8b9ce 100644
--- a/packages/client/src/components/global/misskey-flavored-markdown.vue
+++ b/packages/client/src/components/global/misskey-flavored-markdown.vue
@@ -155,6 +155,13 @@ withDefaults(defineProps<{
 	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
 	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
 }
+
+@keyframes mfm-tada {
+	0%, 100% { transform: scale3d(1, 1, 1); }
+	10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
+	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
+	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
+}
 </style>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index a423c647d..73b297ab1 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -92,7 +92,7 @@ export default defineComponent({
 					switch (token.props.name) {
 						case 'tada': {
 							const speed = validTime(token.props.args.speed) || '1s';
-							style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
+							style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: mfm-tada ${speed} linear infinite both;` : '');
 							break;
 						}
 						case 'jelly': {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index f96b0e63f..25faa82ee 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -486,46 +486,3 @@ hr {
 	30% { opacity: 1; transform: scale(1); }
 	90% { opacity: 0; transform: scale(0.5); }
 }
-
-@keyframes tada {
-	from {
-		transform: scale3d(1, 1, 1);
-	}
-
-	10%,
-	20% {
-		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
-	}
-
-	30%,
-	50%,
-	70%,
-	90% {
-		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-	}
-
-	40%,
-	60%,
-	80% {
-		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-	}
-
-	to {
-		transform: scale3d(1, 1, 1);
-	}
-}
-
-@keyframes bounce{
-  0% {
-    transform:  scaleX(0.90) scaleY(0.90) ;
-  }
-  19% {
-    transform:  scaleX(1.10) scaleY(1.10) ;
-  }
-  48% {
-    transform:  scaleX(0.95) scaleY(0.95) ;
-  }
-  100% {
-    transform:  scaleX(1.00) scaleY(1.00) ;
-  }
-}