fix: animation issue with css property

This commit is contained in:
Alvalen 2024-04-19 20:53:30 +07:00
parent 94d68b5c91
commit 84e6345936
3 changed files with 5 additions and 5 deletions

View file

@ -134,7 +134,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
initial={{
x: 300,
opacity: 0,
@ -203,7 +203,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 "
initial={{
x: 300,
opacity: 0,
@ -276,7 +276,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
initial={{
x: 300,
opacity: 0,