Kevin Powell - Community•14mo ago

CSS Animation (Safari) is not Working Properly

Hello! 👋🏻 I am facing with an issue happening on Safari, with animation. I don't know why this is happening either. The code looks so clean to me. I have checked dev tools, the animation too but I couldn't control it (I guess it is not supported yet to play / pause animations). Code

<li class="nav-item highlighted-text slide-top">
    <a href="#minesa-plus">Minesa+</a>
</li>

<li class="nav-item highlighted-text slide-top">
    <a href="#minesa-plus">Minesa+</a>
</li>

.slide-top {
    animation: slide-top var(--animation-time) linear;
    animation-delay: 0ms; /* Added to remove glitch but still happening... */
}

.slide-top {
    animation: slide-top var(--animation-time) linear;
    animation-delay: 0ms; /* Added to remove glitch but still happening... */
}

2 Replies

Neσ许OP•14mo ago

Somehow I fixed it I guess.

.slide-top {
    animation: slide-top var(--animation-time) ease;
}

was enough to fix it. weird ease-in-out gives same result. while "ease" does not Interesting. Not really, I still get that pause animation.

Neσ许OP•14mo ago

This is the animation for mobile:

Gaming

Programming

CSS Animation (Safari) is not Working Properly