0

I am trying to use the fade out animation in CSS and it works at first but then at the last minute the element pops back. JSFiddle: https://jsfiddle.net/eqb02w5u/

HTML Code:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>


<div class='fade-in'>Fading In</div>
<div class='fade-out'>Fading Out</div>

CSS Code:

.fade-in {
  background-color: red;
  animation:fadeIn 3s linear;
}

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

.fade-out {
  background-color: green;
  animation:fadeOut 3s linear;
}

@keyframes fadeOut {
  100% {
    opacity:0
  }
  0% {
    opacity:1;
  }
}
puk
  • 16,318
  • 29
  • 119
  • 199
  • 2
    https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode `forwards` is your keyword ;) ... https://jsfiddle.net/7fghv54c/ You can take a look at `reverse` too and use a single keyframe : https://jsfiddle.net/uwepn9v5/ – G-Cyrillus Feb 19 '21 at 21:18
  • 1
    Does this answer your question? [Stopping a CSS3 Animation on last frame](https://stackoverflow.com/questions/4359627/stopping-a-css3-animation-on-last-frame) – Petru Tanas Feb 19 '21 at 21:20
  • 1
    You could add `opacity:0;` to the class `.fade-out` ... https://jsfiddle.net/bLvcf6sn/. – JCBiggar Feb 19 '21 at 21:24
  • @JCBiggar that seems like a more intuitive solution – puk Feb 19 '21 at 21:27

1 Answers1

0

This is a really old question but you can add:

animation-fill-mode: forwards;

in each class where you want the animation to stay faded out.

Unokay
  • 1
  • 1