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.62k stars 16.23k forks source link

HowTo fadeIn animation #1833

Open LLloody opened 3 weeks ago

LLloody commented 3 weeks ago

Describe The Bug

I have an element that should start with 0 opacity:

fldStatus {

opacity: 0.0;
animation: fadeIn;
animation-delay: 3000ms;
animation-duration: 2000ms;
width: 100%;
display: inline-grid;
padding: 2px 0px 0px 0px;
margin: 0px;

} this works fine but after the animation completes, the element reverts back to opacity:0

Steps To Reproduce

No response

Expected Behavior

Please explain the fadeIn animations for dopes like me :)

Screenshots

No response

Desktop

No response

Smartphone

No response

Additional Context

No response

TejasNarkhede commented 2 weeks ago

Hey @LLloody It seems like your issue is that after the animation completes, the element's opacity returns to 0 instead of staying at 1 or (your desired value)

You can try this changes, add forwards so the element will retain opacity: 1 this makes element stay as it as...

animation: fadeIn; animation: fadeIn forwards;

add @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

I hope it helps...

opacity1