My css transition doesn't work. I cannot figure out what the problem is. I am adding the class using JavaScript. The element is not changing display. Here is my code and the link to my codepen. I am trying to make a simple modal for a tic tac toe game. Thanks for any help!

```
.back {
  margin-top: 200px;
}

.box {
  display: inline-block;
  vertical-align:top;
  background: lightgray;
  width: 120px;
  height: 120px;
  margin: 2px 0 2px 0;
  border-radius: 20px;
}

h1 {
  margin-top: 30px;
  font-weight: bold;
  font-size: 4em;
}

.popup {
  font-family: 'Signika', 'sans-serif';
  margin: 200px auto 0 auto;
  width: 700px;
  height: 270px;
  background: skyblue;
  border: 6px solid #8dadc3;
  box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
  border-radius: 40px;
  position: relative;
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transition: all 5s;
}

.popup h4 {
  padding-top: 60px;
  font-weight: bold;
  font-size: 3em;
  left: 10%;
  position: absolute;
}

.x {
  margin-top: 130px;
  position: absolute;
  border: 4px solid #8dadc3;
  left: 40%;
}

.o {
  margin-top: 130px;
  position: absolute;
  border: 4px solid #8dadc3;
  left: 50%;
}

.popup.hide {
  opacity: 0;
  visibility: hidden;
}

```

This is my JavaScript:

```
$(document).ready(function(){
  var chosen;
  $('.player').on("click", function(e){
    if($(this).hasClass("x")){
      console.log("X");
      chosen = "X"
    } else {
      console.log("O");
      chosen = "O";
    }
    $('.popup').addClass('hide');
  });
});

```

link to codepen:

[Direct link to code](http://codepen.io/skyship/pen/yOzObE)