a bit animation

src/pages/style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 
 export const MainWrapper = styled.main`
     display: flex;
@@ -49,7 +49,7 @@ export const IconButton = styled.button`
 
 const reveal = keyframes`
     0% {
-        transform: scale(0.1, 0.1)
+        transform: scale(0.1, 0.1);
     }
 
     100% {
@@ -147,7 +147,6 @@ export const StartI = styled.i`
     color: white;
     margin: -35% 0 0 -35%;
     border-radius: 50%;
-    /* background: linear-gradient(#cbc7bc, #d2cbc3); */
     background: linear-gradient(#22a037, #98e221);
     box-shadow:
         0 -2px 5px rgba(255,255,255,0.05),
@@ -158,3 +157,86 @@ export const StartI = styled.i`
     justify-content: center;
     font-style: normal;
 `;
+
+// const LineRotation = keyframes
+//`
+//     0% {
+//         transform: translate(-50%, -100%) rotate(0);
+//     }
+
+//     100% {
+//         transform: translate(-50%, -100%) rotate(1turn);
+//     }
+// `;
+
+
+// type LineProps = {
+//     radius: number;
+//     width: number;
+
+// }
+
+// export const HalfLine = styled.div<LineProps>(({
+//     radius,
+//     width,
+// }) =>css`
+//     transform-origin: 50% 100%;
+//     animation: ${LineRotation} 3s linear infinite;
+//     width: ${radius * 2}px;
+//     height: ${radius}px;
+//     border-top-left-radius: ${radius}px;
+//     border-top-right-radius: ${radius}px;
+//     border: ${width}px solid gray;
+//     border-bottom: 0;
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -100%);
+// `);
+
+const LineRotation = keyframes`
+    0% {
+        transform: translate(-50%, -50%) rotate(0);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(1turn);
+    }
+`;
+
+const LineHideAnimation = keyframes`
+    0% {
+        /* transform: scale(1); */
+        opacity: 1;
+    }
+    
+    100% {
+        /* transform: scale(0); */
+        opacity: 0;
+    }
+`;
+
+export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; reverse: boolean }>`
+    animation: ${LineRotation} ${({ animationSpeed }) => animationSpeed}s linear infinite${({ reverse }) => reverse ? ' reverse' : ''};
+    animation-delay: -${({ delay }) => delay}s;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translate(-50%, -100%);
+`;
+
+export const HideGroup = styled.g<{ hide: boolean; delay: number; }>`
+    animation: ${({ hide }) => hide ? css`${LineHideAnimation} 3s ease-in forwards`: ''};
+    transform-origin: 50% 50%;
+    animation-delay: ${({ delay }) => delay / 10}s;
+`;
+export const Circle = styled.circle<{ circumference: number; percent: number }>`
+    transition: 0.35s stroke-dashoffset;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    stroke-dasharray: ${({ circumference }) => `${circumference} ${circumference}`};
+    stroke-dashoffset: ${({ circumference, percent }) => circumference - percent / 100 * circumference};
+`;
+
+