Is it possible to add animation like bounce?

[victorpavlenko]

Is it possible to add animation like bounce? I try to add some code:

 & .ReactModal__Content {

        &--after-open {
          animation-name: bounceIn;
          animation-duration: 450ms;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          opacity: 1;
        }
}

 @keyframes bounceIn{
    0%{
      opacity: 0;
      transform: scale(0.3) translate3d(0,0,0);
    }
    50%{
      opacity: 0.9;
      transform: scale(1.1);
    }
    80%{
      opacity: 1;
      transform: scale(0.89);
    }
    100%{
      opacity: 1;
      transform: scale(1) translate3d(0,0,0);
    }
  }

But its doesnt work

[diasbruno]

@Xurma2 Check out the example css https://github.com/reactjs/react-modal/blob/master/examples/basic/app.css. Maybe you can find something missing.

[diasbruno]

Also, remember to set the closeTimeoutMS to the time of the animation (when closing).

[diasbruno]

Any progress on this issue?

[victorpavlenko]

Still no have time to try. I'll write when I do this

2017-12-22 15:21 GMT+03:00 Bruno Dias notifications@github.com:

Any progress on this issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/reactjs/react-modal/issues/587#issuecomment-353587911, or mute the thread https://github.com/notifications/unsubscribe-auth/AE6yKLEp0VKiCkyE_cpLtXvLH0mW9dNAks5tC56xgaJpZM4RKKgy .

-- Frontend|React|UI: victor-js.com SkypeID: victor.developer

[ianflorentino]

this is achievable by adding the animation to the styles content object on the styles prop of the Modal component:

<Modal styles={{ content: { animation: "bounceIn .5s ease-in-out" } }} />

[victorpavlenko]

@diasbruno don't have any idea why it doesn't work For any element, animation works fine but for content, it doesn't

@ianflorentino It doesn't work for me