Why is css fade-in animation also causing a fade out

Question

I am trying to fade in a menu, and it is fading in, but then it is fading out again. I must be missing something simple and obvious. Can someone see where I went wrong?

The code is simple and affects a single div, which should fade in...

fadeIn {
  display: inherit;
  -webkit-animation: fadein 4s linear forwards;
  animation: fadein 4s linear forwards;
}
@-webkit-keyframes fadein {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes fadein {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

Does this answer your question? [Maintaining the final state at end of a CSS3 animation](https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation) — shreyasm-dev, Oct 07 '20 at 14:38

FluffyKitten · Accepted Answer · 2020-10-07T16:22:55.997

Note the 0%, 100% {} in your existing keyframes... what this does is start and end with that CSS. opacity:1 is set at 50%, instead of 100%, so it is only at full opacity half way through the animation.

You just need to change your keyframes so that the animation starts at 0 and ends at 100%, e.g.

@keyframes fadein {
  0%    { opacity: 0;}
  100%  { opacity: 1; }
}

**Working Example: **

.fadeIn {
  display: inherit;
  -webkit-animation: fadein 4s linear forwards;
  animation: fadein 4s linear forwards;
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="fadeIn">Hello</div>

Why is css fade-in animation also causing a fade out

1 Answers1