HowTo fadeIn animation

[LLloody]

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]

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...

[Redskullvue]

Hey @LLloody It's not a bug . After your animation finishes running your css class will overwrite the animation properties you have 2 options : 1- you can either use JavasScript in order to toggle your element visibility and set the animation class to it . 2- You can use CSS @keyframes option to set opacity to 1 after your animation is finished again

my advice : Go with JS .

Hope it helps. :)