Animation CSS not working

Ask the community
,
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 =>

    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