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? 

See fiddle: <https://jsfiddle.net/mtbh24uL/>

```
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

```

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.

[![enter image description here](https://i.stack.imgur.com/UVmkV.png)](https://i.stack.imgur.com/UVmkV.png)