title: animate opacity from 0 to 1 and than back
body: <p>I am trying to animate opacity( and translate value ) from 0 to 1 and than back to 0, when the class is removed. The opacity animates nicely to 1, but it does not animate back to 0. Instead it just jumps. See this pen to see my problem in action. What am I missing here?</p>
  
  <p><a href="https://codepen.io/timsim/pen/QvppGz" rel="nofollow noreferrer">https://codepen.io/timsim/pen/QvppGz</a></p>
  
  <p>Code:</p>
  
  <pre><code>.cp-active {
      transform: translateY(50px) !important;
      opacity: 1 !important;
  }
  
  #cp {
      background-color:red;
      top: -30px;
      position: relative;
      width: 85%;
      margin: auto;
      box-shadow: none;
      border-color: black;
      z-index: 1;
      opacity: 0;
      -webkit-transition: -webkit-transform 0.5s ease-in-out;
  
      height:100px;
     width:100px;
  }
  
  $("body").on("click", function(){
  
      if ($("#cp").hasClass("cp-active")){
          $("#cp").removeClass("cp-active")
      }else{
          $("#cp").addClass("cp-active")
      }
  
  });
  </code></pre>