transition in onboarding

yceballost · yceballost · commit 03df2b1921b6 · 2025-03-15T12:42:50.000+01:00
diff --git a/src/pages/skin-tool/template/Onboarding.css b/src/pages/skin-tool/template/Onboarding.css
@@ -1,19 +1,18 @@
-/* Transition styles for the Onboarding component */
-
 .transition {
   opacity: 0;
-  transform: translateY(40px);
-  animation: fadeIn 0.8s ease-out 0.2s forwards;
+  animation: slideIn 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
 }
 
-@keyframes fadeIn {
+@keyframes slideIn {
   0% {
     opacity: 0;
     transform: translateY(40px);
+    filter: blur(5px);
   }
   100% {
     opacity: 1;
     transform: translateY(0);
+    filter: blur(0px);
   }
 }
 
diff --git a/src/pages/skin-tool/template/Onboarding.jsx b/src/pages/skin-tool/template/Onboarding.jsx
@@ -81,9 +81,9 @@ const StepHeader = ({
 
             <Align x="center" width={872}>
               <ResponsiveLayout>
-                <Boxed>
-                  <div className="transition">{children}</div>
-                </Boxed>
+                <div className="transition">
+                  <Boxed>{children}</Boxed>
+                </div>
               </ResponsiveLayout>
             </Align>
           </Stack>

Original file line number	Diff line number	Diff line change
`@@ -1,19 +1,18 @@`
`1`		`-/* Transition styles for the Onboarding component */`
`2`		`-`
`3`	`1`	`.transition {`
`4`	`2`	`opacity: 0;`
`5`		`- transform: translateY(40px);`
`6`		`- animation: fadeIn 0.8s ease-out 0.2s forwards;`
	`3`	`+ animation: slideIn 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;`
`7`	`4`	`}`
`8`	`5`
`9`		`-@keyframes fadeIn {`
	`6`	`+@keyframes slideIn {`
`10`	`7`	`0% {`
`11`	`8`	`opacity: 0;`
`12`	`9`	`transform: translateY(40px);`
	`10`	`+ filter: blur(5px);`
`13`	`11`	`}`
`14`	`12`	`100% {`
`15`	`13`	`opacity: 1;`
`16`	`14`	`transform: translateY(0);`
	`15`	`+ filter: blur(0px);`
`17`	`16`	`}`
`18`	`17`	`}`
`19`	`18`