Custom CSS transitions not working

Site URL: https://www.kindred.work/servicesv2

Hi 🙂 , 

I've created 3 custom modals to pop up on a button click by adding a .active class to the modal container. 

The CSS I've used to achieve this is as follows: 

 #coach-wrapper {
    left: 100vw;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }
  #coach-wrapper.active{
    opacity: 100%;
    display: flex;
    position: relative;
    z-index: 1000;
    left: 0;
  }

I expected the modal to slide in from the left however it currently just immediately appears on the page with no transition. 

Any advice on how to achieve such a transition would be greatly appreciated! 

Have you tried CSS3 Animation with @keyframe yet?