From 2c060555520a0472a92cbffc7444e154102a7b3e Mon Sep 17 00:00:00 2001
From: KaiyiWing <Zhang.kaiyi42@gmail.com>
Date: Tue, 25 Apr 2023 11:52:32 +0800
Subject: [PATCH] feat: add tada animation to coffee icon

---
 .vscode/settings.json                         |  1 +
 .../components/ResultScreen/index.module.css  | 39 +++++++++++++++++++
 .../Typing/components/ResultScreen/index.tsx  |  3 +-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Typing/components/ResultScreen/index.module.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 742f51c6..ad466a9f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,6 +24,7 @@
     "romaji",
     "svgr",
     "tabler",
+    "tada",
     "tailwindcss",
     "trivago",
     "ukphone",
diff --git a/src/pages/Typing/components/ResultScreen/index.module.css b/src/pages/Typing/components/ResultScreen/index.module.css
new file mode 100644
index 00000000..14ab8c41
--- /dev/null
+++ b/src/pages/Typing/components/ResultScreen/index.module.css
@@ -0,0 +1,39 @@
+.img-shake {
+  animation: tada 1.5s ease-in-out 1s 4;
+  transition: background-color 0.1s ease-in-out;
+}
+
+@keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%,
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    fill: #818cf8;
+  }
+
+  40%,
+  60%,
+  80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+    animation-delay: 2s;
+  }
+}
diff --git a/src/pages/Typing/components/ResultScreen/index.tsx b/src/pages/Typing/components/ResultScreen/index.tsx
index 43d5e6e0..4a67ba70 100644
--- a/src/pages/Typing/components/ResultScreen/index.tsx
+++ b/src/pages/Typing/components/ResultScreen/index.tsx
@@ -3,6 +3,7 @@ import ShareButton from '../ShareButton'
 import ConclusionBar from './ConclusionBar'
 import RemarkRing from './RemarkRing'
 import WordChip from './WordChip'
+import styles from './index.module.css'
 import redBookLogo from '@/assets/redBook-color-logo.svg'
 import Tooltip from '@/components/Tooltip'
 import { currentChapterAtom, currentDictInfoAtom, infoPanelStateAtom, randomConfigAtom } from '@/store'
@@ -176,7 +177,7 @@ const ResultScreen = () => {
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 640 512"
-                    className="h-5.5 w-5.5 fill-current text-gray-500 focus:outline-none dark:text-gray-400"
+                    className={`h-5.5 w-5.5 fill-current text-gray-500 focus:outline-none dark:text-gray-400  ${styles.imgShake}`}
                   >
                     <path d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
                   </svg>