Search code examples
cssreact-modal

React modal animation modal keyframes

I am using react modal for models in my react application. I would like to add some animations to them for when they appear. I am using. css3 keyframes to animate my modals.

@keyframes modalSlide {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

This gives nice sliding effect combined with animation-duration but it slides down from the top. How do I change so it slides up from the bottom instead?

Solution

  • Try positive value for translateY in keyframes from:

    @keyframes modalSlide {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }

    }