@keyframes appearZoom {

    from{

        opacity: 0;

        scale: 0.5;

    }

    to {

        opacity: 1;

        scale: 1;

    }

}



.animazioneZoom{

    animation: appearZoom linear;

    animation-timeline: view();

    animation-range: entry 0% cover 40%;

}



.animazioneZoomFooter{

    animation: appearZoom linear;

    animation-timeline: view();

    animation-range: entry 0% cover 13%;

}



@keyframes appearTranslateX {

    from{

        opacity: 0;

        transform: translateX(-100px);

    }

    to {

        opacity: 1;

        transform: translateX(0px);

    }

}



.animazioneTranslateX{

    animation: appearTranslateX linear;

    animation-timeline: view();

    animation-range: entry 0% cover 40%;

}



@keyframes appearTranslateXLeft {

    from{

        opacity: 0;

        transform: translateX(+100px);

    }

    to {

        opacity: 1;

        transform: translateX(0px);

    }

}



.animazioneTranslateXLeft{

    animation: appearTranslateXLeft linear;

    animation-timeline: view();

    animation-range: entry 0% cover 40%;

}



@keyframes appearClipPath {

    from{

        opacity: 0;

        clip-path: circle(0% at 50% 50%);

    }

    to {

        opacity: 1;

        clip-path: circle(100% at 50% 50%);

    }

}



.animazioneClipPath{

    animation: appearClipPath linear;

    animation-timeline: view();

    animation-range: entry 0% cover 40%;

}



@keyframes appearFadeIn {

    from{

        opacity: 0;

        

    }

    to {

        opacity: 1;

        

    }

}



.animazioneFadeIn{

    animation: appearFadeIn linear;

    animation-timeline: view();

    animation-range: entry 0% cover 40%;

}