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 <#587 (comment)>, 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