KPC
Kevin Powell - Community•9mo 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
⋆˚࿔ ɳҽσ ˚⋆
⋆˚࿔ ɳҽσ ˚⋆•9mo 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.
⋆˚࿔ ɳҽσ ˚⋆
⋆˚࿔ ɳҽσ ˚⋆•9mo ago
This is the animation for mobile:
Want results from more Discord servers?
Add your server
More Posts
Best resources to learn AccessibilityRecently I have learned about accessibility via LinkedIn learning however on our live project I realHow to make the middle part of this loader transparenthttps://codepen.io/stressunfit/pen/MWLgQee Hi, i made a loader but i am facing issue to make the midWhen to use neither Grid nor Flexbox?I'm a frontend newbie. I read how CSS Grid and Flexbox are the future and replace most legacy CSS haSVG hambuger icon preventing content on the page to displayWhen I comment out the svg from the html file it still prevents the content from display. The contenClarity in Graphql CodegenI am trying to generate the typescript types using graphql-codegen cli. as of now every request is fCSS Media Query not OverridingI have this problem where my media query on specific screen size is not overriding. When I open mg dTrying to understand if I always need to identify commonjs or module?I have the following package.json file and do not see a type key, but they are using es module imporCSS challenge websiteshttps://icodethis.com/Tabindex for Button inside LinkI've got this html ```html <a href="example.com"> <button>Label</button> </a> ``` The button is Next.js click outside together with togglerI have this component called `DateRangerPicker` that opens when I click on an input tag's `onClick`.