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