Animation CSS not working

Technical
1

Hi there, I´m using the code below to animate some images. It shows the animation within funnelish but not in PC or Cellphone. Kindly please would you help find the problem?

.benefit-showup {
    animation: appear 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

@keyframes appear {
    from {
        opacity: 0;
        translate: -100vw 0;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
2

Try this dear =>

.benefit-showup {
animation: appear 1s ease-in-out; /* Changed animation duration to 1s */
animation-timeline: view();
animation-range: cover 0% cover 30%;
}

@keyframes appear {
from {
opacity: 0;
transform: translate(-100vw, 0); /* Changed translate to transform /
}
to {
opacity: 1;
transform: translate(0, 0); / Changed translate to transform */
}
}

1 Like