From 09cab605fc87888249b1c8b13a3af3ded3ebba6d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 2 Nov 2020 15:16:37 +0900
Subject: Add new MFM animation

---
 src/client/components/mfm.ts |  6 ++++++
 src/client/style.scss        | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

(limited to 'src/client')

diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index 7a8ee8b19f..7e4fec2848 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -125,6 +125,12 @@ export default defineComponent({
 					}, genEl(token.children));
 				}
 
+				case 'twitch': {
+					return h('span', {
+						style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-twitch 0.5s ease infinite;' : 'display: inline-block;'
+					}, genEl(token.children));
+				}
+
 				case 'url': {
 					return [h(MkUrl, {
 						key: Math.random(),
diff --git a/src/client/style.scss b/src/client/style.scss
index cbcd497e22..be9e373291 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -499,6 +499,21 @@ hr {
 	100% { transform: translateY(0); }
 }
 
+// const gen = () => `translate(${Math.floor(Math.random() * 24) - 12}px, ${Math.floor(Math.random() * 24) - 12}px)`
+@keyframes anime-twitch {
+	0% { transform: translate(0px, -9px); }
+	10% { transform: translate(5px, -11px); }
+	20% { transform: translate(-12px, 2px); }
+	30% { transform: translate(10px, 4px); }
+	40% { transform: translate(0px, 9px); }
+	50% { transform: translate(-6px, 2px); }
+	60% { transform: translate(-7px, 7px); }
+	70% { transform: translate(14px, 7px); }
+	80% { transform: translate(-5px, 10px); }
+	90% { transform: translate(3px, -3px); }
+	100% { transform: translate(10px, 8px); }
+}
+
 @keyframes anime-tada {
 	from {
 		transform: scale3d(1, 1, 1);
-- 
cgit v1.2.3-freya