انیمیشن ها در حالت موبایل

سلام
من یه کارتی درست کردم که اگر روش هاور میشد، یه کانتنتی از زیر میومد بالا
حالا تو حالت موبایل که همچین هاور نیست، اومدم از مدیا کوئری استفاده کردم و استایل هایی که قرار بود با هاور بیان رو، گذاشتم که کلا در حالتی اجرا بشن که انگار کلا روشون هاور شده.
به صورت تئوری این راه جواب میده اما تو عمل، کامل جواب نمیداد. میتونید بگید مشکل من از کجاست؟

کد html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card</title>
    <link href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/Extra.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vazir-font/30.1.0/font-face.css" integrity="sha512-ZHFuHiK3EA1uh2tx7nB0j9HyXR/IAFW24KVNFGjY8QIjtDKHmcowjUyObXF40wYrG25+kECHEbH8rL+HbvRwYA==" crossorigin="anonymous" referrerpolicy="no-referrer" />\
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lalezar&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/card.css">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body dir="rtl" class="font-vazir grid min-h-[100vh] place-items-center leading-6 bg-customblack">

    <div class="card text-white bg-cover pt-40 max-w-[35ch] rounded-[1rem] shadow-lg overflow-hidden">
        <div class="card-content">

            <h2 class="font-lalezar card-title relative w-max pb-3 font-medium text-[1.3rem]">اسم نمونه کار من</h2>
            <p class="card-body my-2 text-customgaryOpacity font-[500]">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک </p>
            <a href="" class=" shadow inline-block text-customDrak bg-customGreen py-2 px-5 hover:bg-green-500 font-semibold rounded-lg focus:ring-4 ring-slate-700 mt-1 text-sm">بریم ببینیمش!</a>

        </div>
    </div>

</body>
</html>

کد css

*::after,
*::before{
    box-sizing: border-box;
}
.card{
    background: url(../img/card-bg.jpg);
    transition: transform 500ms ease;
    -webkit-transition: transform 500ms ease;
    -moz-transition: transform 500ms ease;
    -ms-transition: transform 500ms ease;
    -o-transition: transform 500ms ease;
}

@media (hover) {

    .card-content{
        transform: translateY(70%);
        -webkit-transform: translateY(70%);
        -moz-transform: translateY(70%);
        -ms-transform: translateY(70%);
        -o-transform: translateY(70%);
        transition: transform 800ms ease;
        -webkit-transition: transform 800ms ease;
        -moz-transition: transform 800ms ease;
        -ms-transition: transform 800ms ease;
        -o-transition: transform 800ms ease;
    }

    .card-title::after{
        content: '';
        position: absolute;
        height: 4px;
        background-color: #42f584;
        left: calc(var(--padding) * -.25);
        width: calc(100% + var(--padding));
        bottom: 0;
        transition: transform 500ms ease-in-out;
        -webkit-transition: transform 500ms ease-in-out;
        -moz-transition: transform 500ms ease-in-out;
        -ms-transition: transform 500ms ease-in-out;
        -o-transition: transform 500ms ease-in-out;
        transform-origin: right;
    }

    .card:hover .card-content,
    .card:focus-within .card-content{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transition-delay: 500ms;
    }

    .card:focus-within .card-content{
        transition-duration: 0;
    }

    .card:hover .card-content > *:not(.card-title),
    .card:focus-within .card-content > *:not(.card-title){
        opacity: 1;
        transition-delay: 800ms;
    }

.bg2{
    background: url(../img/bg-2.jpg);
}

.card-content{
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient( 
        hsl(0, 0%, 0%, .2),        
        hsl(0, 50%, 0%, .4) 30%,        
        hsl(0, 0%, 0%, 1)    
    );
    transform: translateY(70%);
    -webkit-transform: translateY(70%);
    -moz-transform: translateY(70%);
    -ms-transform: translateY(70%);
    -o-transform: translateY(70%);
    transition: transform 800ms ease;
    -webkit-transition: transform 800ms ease;
    -moz-transition: transform 800ms ease;
    -ms-transition: transform 800ms ease;
    -o-transition: transform 800ms ease;
}

.card-title::after{
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
}

    .card:hover .card-title::after,
    .card:focus-within .card-title::after{
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
    }

}

.card-content > *:not(.card-title){
    opacity: 0;
    transition: opacity 500ms ease;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -ms-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
}

.card:hover,
    .card:focus-within{
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
    }

پ.ن: در html از tailwind استفاده شده

ثبت پرسش جدید

به همدیگه کمک کنیم

به علی سعادت کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

انیمیشن ها در حالت موبایل

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

به همدیگه کمک کنیم

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید