fix: transition from png to apng leo

src/components/BreathPage/index.tsx

@@ -102,12 +102,19 @@ function BreathPage(): JSX.Element {
     <>
       <section
         className={`${styles.page} page`}
-        style={{
+        // style={{
-          backgroundImage: `url(${
+        //   backgroundImage: `url(${!isOpenModal ? asset?.url : "none"})`,
-            !isOpenModal ? asset?.url : "none"
+        // }}
-          })`,
-        }}
       >
+        {!isOpenModal && asset?.url && (
+          <div className={styles["leo-apng-container"]}>
+            <img
+              className={styles["leo-apng"]}
+              src={asset.url}
+              alt="leo apng"
+            />
+          </div>
+        )}
         {!isOpenModal && isShowPreview && (
           <div className={styles.preview}>
             <img className={styles.leo} src="/leo.png" alt="leo" />

src/components/BreathPage/styles.module.css

@@ -5,12 +5,25 @@
   justify-content: center;
   align-items: center;
   background-color: #01010b;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   flex: auto;
 }
 
+.leo-apng-container {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.leo-apng {
+  animation-name: leo-apng;
+  animation-duration: 1.5s;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+}
+
 .text-container {
   position: relative;
   width: 138px;
@@ -60,6 +73,15 @@
   animation-timing-function: linear;
 }
 
+@keyframes leo-apng {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes leo {
   0% {
     opacity: 0;