From 0616191f787dc91516f8a470de92bda5922183c2 Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Sat, 16 Sep 2023 03:33:15 +0400
Subject: [PATCH] fix: transition from png to apng leo

---
 src/components/BreathPage/index.tsx         | 17 +++++++++----
 src/components/BreathPage/styles.module.css | 28 ++++++++++++++++++---
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/components/BreathPage/index.tsx b/src/components/BreathPage/index.tsx
index ad0c689..df56535 100644
--- a/src/components/BreathPage/index.tsx
+++ b/src/components/BreathPage/index.tsx
@@ -102,12 +102,19 @@ function BreathPage(): JSX.Element {
     <>
       <section
         className={`${styles.page} page`}
-        style={{
-          backgroundImage: `url(${
-            !isOpenModal ? asset?.url : "none"
-          })`,
-        }}
+        // style={{
+        //   backgroundImage: `url(${!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" />
diff --git a/src/components/BreathPage/styles.module.css b/src/components/BreathPage/styles.module.css
index edf989c..6ac4cb6 100644
--- a/src/components/BreathPage/styles.module.css
+++ b/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;