Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it possible to add animation like bounce?

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Comments:6

Top GitHub Comments

1reaction

victorpavlenkocommented, Dec 22, 2017

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

1reaction

diasbrunocommented, Dec 21, 2017

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