fix: animation issue with css property
This commit is contained in:
parent
94d68b5c91
commit
84e6345936
3 changed files with 5 additions and 5 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default function Page() {
|
|||
initial={{ scale: 1 }}
|
||||
animate={{ scale: 1.6 }}
|
||||
transition={{ ease: "circOut", duration: 1 }}
|
||||
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 ">
|
||||
<Image
|
||||
src={Me2}
|
||||
alt="Alvalens"
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export default function Page() {
|
|||
initial={{ scale: 1 }}
|
||||
animate={{ scale: 1.6 }}
|
||||
transition={{ duration: 1, ease: "circOut" }}
|
||||
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 ">
|
||||
<Image
|
||||
src={ProjectAll}
|
||||
alt="Alvalens"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue