search

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.72k stars 16.23k forks source link

animation on Safari(IOS MacOS iPadOS) only flash, and no normal animation. #1565

Closed MatchOvO closed 2 years ago

MatchOvO commented 2 years ago

Describe The Bug

My css class is:

.loading-box .logo{
    --icon-size: 96px;
    color: #2d2f39;
    animation: flipInX;
    animation-duration: 1s;
}

.loading-box h1{
    font-size: 34px;
    color: #2d2f39;
    animation: flipInX;
    animation-duration: .5s;
    animation-delay: .5s;
    animation-fill-mode: both;
}

.loading-box h3{
    font-size: 16px;
    color: #2d2f39;
    animation: fadeIn;
    animation-duration: .8s;
    animation-delay: .5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots

In Chrome

截屏2022-06-30 13 29 34

In Safari

截屏2022-06-30 13 31 10

Desktop

No response

Smartphone

No response

Additional Context

No response

MatchOvO commented 2 years ago

'fadeIn' has not that issue'flipInX'has this issue

usama-mk commented 2 years ago

Did you find any solution to it yet?

eltonmesquita commented 2 years ago

Without a link to a live reproduction of the issue, it gets very hard to help. Also, we'd need some more details like browser and OS version. Please, follow our issue template, it's there to help

eltonmesquita commented 2 years ago

I'm closing this as there isn't enough info for us to tackle into the issue. Is anyone got something relevant to share, I'll reopen the issue