CODEWITHSUNDEEP
csscss-animations
IWI
IWI

Reputation: 1608

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

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;
  }
}

enter image description here

Upvotes: 1

Views: 612

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

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>

Upvotes: 3

Related Questions