fadeOut CSS does not add up

Asked

Viewed 35 times

-2

I have the following code, but the problem is that it should disappear altogether, but after a while it comes back and becomes static.

I wish it were gone, that the element was removed, as I can do?

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

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

.afo {
  width: 270px;
  height: 30px;
  padding: 20px 0;
  color: black;
  background: lightblue;
  font-weight: bold;
  border-radius: 5px;
  animation: fadeOut ease 5s;
  -webkit-animation: fadeOut ease 5s;
  -moz-animation: fadeOut ease 5s;
  -o-animation: fadeOut ease 5s;
  -ms-animation: fadeOut ease 5s;
}
<span class="alert_danger afo">
  <label>Usuário ou senha inválidos.</label>
</span>

css

  • You mean when the animation is over, the element span be removed from the DOM or just make it transparent (invisible)?

  • Has to be removed

1 answer

0


To set how to start or end the effect of fade, can use the attribute Animation-Fill-mode

How do you want the effect to be permanent, IE, when finishing keep as it was the last frame of animation, need to set the animation-fill-mode as forwards:

animation-fill-mode: forwards or in the fade attribute itself: animation: fadeOut ease 5s forwards:

forwards The target will retain the computed values set by the last keyframe encountered During Execution.

That is, it will keep the values of the last keyframe of animation.

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

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

.afo {
  width: 270px;
  height: 30px;
  padding: 20px 0;
  color: black;
  background: lightblue;
  font-weight: bold;
  border-radius: 5px;
  animation: fadeOut ease 5s forwards;
  -webkit-animation: fadeOut ease 5s forwards;
  -moz-animation: fadeOut ease 5s forwards;
  -o-animation: fadeOut ease 5s forwards;
  -ms-animation: fadeOut ease 5s forwards;
}
<span class="alert_danger afo">
    <label>Usuário ou senha inválidos.</label>
</span>

  • I’m still not giving you an A-plus because I don’t know if that solves the AP question. I had understood that he wanted to remove the DOM element, but to the point of not affecting the layout. Or affect even, something like display: none or literally remove from the DOM using JS.

  • I understood, I replied based on "but after a while he comes back and becomes static", which leads me to believe that he wanted when he finished the fade, to be "hidden", but I understand what he said, this one "I wanted it gone, the element removed" leaves a bit in doubt, but it wouldn’t make sense to remove the label to have to add later if you want to reexibite the message ;)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.