From e16ce8c50b105fb92d3be20bbcac494c0ec5d429 Mon Sep 17 00:00:00 2001
From: yui-szk <yuisuzuki.017@gmail.com>
Date: Fri, 6 Sep 2024 14:08:51 +0900
Subject: [PATCH] =?UTF-8?q?check=E7=94=BB=E9=9D=A2=E3=81=AB=E3=82=A2?=
 =?UTF-8?q?=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CreateMessageCheck.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/CreateMessageCheck.tsx b/src/components/CreateMessageCheck.tsx
index b3b079a..64848fe 100644
--- a/src/components/CreateMessageCheck.tsx
+++ b/src/components/CreateMessageCheck.tsx
@@ -1,4 +1,4 @@
-import { css, cx } from "@hono/hono/css";
+import { css, cx, keyframes } from "@hono/hono/css";
 import { WithHTML } from "../layout/WithHTML.tsx";
 import { CocktailGlass } from "./CocktailGlass.tsx";
 import { getCocktail, getMessage } from "./utils.ts";
@@ -45,6 +45,18 @@ const messageContainerStyle = css`
   }
 `;
 
+const float = keyframes`
+  0%{
+    transform: translateY(0.15rem);
+  }
+  50%{
+    transform: translateY(-0.15rem);
+  }
+  100%{
+    transform: translateY(0.15rem);
+  }
+`;
+
 const messageStyle = css`
   min-width: 7rem;
   min-height: 7rem;
@@ -54,6 +66,8 @@ const messageStyle = css`
   justify-content: center;
   align-items: center;
 
+  animation: 1.8s ease-in-out infinite ${float};
+
   p {
     color: var(--color-black);
     margin: 0 1rem;
@@ -102,6 +116,7 @@ export const CreateMessageCheck = async (
   props: PropsWithChildren<{ id: string }>,
 ) => {
   const id: string = props.id;
+
   const cocktails = (await getMessage(id)).cocktails.map(
     async (cocktailName: CocktailName) => {
       return await getCocktail(cocktailName.name);
@@ -139,7 +154,7 @@ export const CreateMessageCheck = async (
                 style={(await getCocktail(cocktail.name)).word
                   ? `background-color: ${
                     (await getCocktail(cocktail.name)).color
-                  };`
+                  }; animation-delay: ${index * 0.15}s`
                   : "display: none"}
               >
                 <p>{(await getCocktail(cocktail.name)).word}</p>