Move animation into css file

src/components/Toast/index.web.tsx

@@ -10,7 +10,6 @@ import {
   getToastTypeStyles,
   getToastWebAnimationStyles,
   TOAST_TYPE_TO_ICON,
-  TOAST_WEB_KEYFRAMES,
 } from '#/components/Toast/style'
 import {type ToastType} from '#/components/Toast/types'
 
@@ -49,16 +48,6 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
     }
   }, [activeToast])
 
-  useEffect(() => {
-    const styleId = 'toast-animations'
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement('style')
-      style.id = styleId
-      style.textContent = TOAST_WEB_KEYFRAMES
-      document.head.appendChild(style)
-    }
-  }, [])
-
   const t = useTheme()
 
   const toastTypeStyles = getToastTypeStyles(t)

src/components/Toast/style.ts

@@ -143,23 +143,3 @@ export const getToastWebAnimationStyles = () => ({
     animation: 'toastFadeOut 0.2s ease-in forwards',
   },
 })
-
-export const TOAST_WEB_KEYFRAMES = `
-  @keyframes toastFadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastFadeOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-`

src/style.css

@@ -369,3 +369,23 @@ input[type='range'][orient='vertical']::-moz-range-thumb {
     transform: translateY(0);
   }
 }
+
+/*
+ * #/components/Toast/index.web.tsx
+ */
+@keyframes toastFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes toastFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}