.animate-zoom{
    animation : zoom   ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

.slide-left{
    animation: slide-left ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}


.slide-up{
    animation: slide-up ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}


@keyframes slide-left{
    from{
        opacity: 0;
        transform: translateX(-500%);
        filter: blur(20px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes slide-up{
    from{
        opacity: 0;
        transform: translateY(500%);
        filter: blur(20px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes zoom{
    from{
        opacity: 0;
        filter: blur(20px);
        transform: scale(0.5);
       
    }
    to{
        opacity: 1;
        
        transform: scale(1);
        filter: blur(0);
    }
}