CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
AnApprentice
AnApprentice

Reputation: 110980

Why is this CSS Animation rendering forward but not in reverse?

I'm using ReactModal which provides CSS classes for animations (example below):

.ReactModal__Content {
  opacity: 0;
}

.ReactModal__Content--after-open {
  opacity: 1;
  transition: opacity 150ms;
}

.ReactModal__Content--before-close {
  opacity: 0;
}

I'm trying to animate the modal in and out. The animate in is working but not the animation in reverse which I want to have happen on close... What am I doing wrong with the animation properties below?

  .ReactModal__Content {
    animation-duration: 1s;
    animation-name: fadeInUpBigXXX;

  }

  .ReactModal__Content--after-open {
    animation-direction: normal;


  }
  .ReactModal__Content--before-close {
    animation-direction: reverse;
  }

  @keyframes fadeInUpBigXXX {
    from {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

The modal is animating in nicely. But onClose, the modal is not performing the reverse fadeInUpBigXXX animation. Why?

Upvotes: 0

Views: 61

Answers (1)

Julien Grégoire
Julien Grégoire

Reputation: 17134

Your animation by default will run just once. So once it finishes the first time, it's done. One thing you can do is change the animation-iteration-count in the before-close class. Like this for example:

.reverse {
  animation-direction: reverse;
  animation-iteration-count: 2;
  transform: translate3d(0, 500px, 0);
  opacity: 0;
}

.normal {
  animation-direction: normal;
}

#test {
  background-color: blue;
  width: 100px;
  height: 100px;
  animation-duration: 4s;
  animation-name: fadeInUpBigXXX;
}

@keyframes fadeInUpBigXXX {
  from {
    opacity: 0;
    transform: translate3d(0, 500px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

https://jsfiddle.net/bjkbakg4/23/

Upvotes: 1

Related Questions