title: How to create a pop up animation with a modal using css?
body: <p>I have already created the modal in css, but when I try changing the transition so that it pops more like a modal instead of fading in, it doesn't work. I've tried changing the duration and the transition type but it doesn't seem to apply. Am I using the wrong transition? </p>
  
  <p>See fiddle: <a href="https://jsfiddle.net/mtbh24uL/" rel="nofollow noreferrer">https://jsfiddle.net/mtbh24uL/</a></p>
  
  <pre><code>.popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 5s ease-in-out;
  }
  </code></pre>
  
  <p>My goal: to have more of a pop up effect like a real javascript modal. I basically need to create a modal like you see in the following picture. I'm not sure what the best approach is or the best plugin.</p>
  
  <p><a href="https://i.stack.imgur.com/UVmkV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UVmkV.png" alt="enter image description here"></a></p>