title: How to display notification popup with animation appearing and decreasing from right top to bottom and closing from bottom to top
body: <p>Currently, my notification popup work but I would like to do this animation without JS/JQuery <strong>(only animation)</strong>. Also there is an issue with clicking. When you click outside when popup is open, then work normally. But if you click on this text <em>OPEN</em>, then ending animation won't work.
  Animation appearing and decreasing from right top to bottom and closing from bottom to top. It should work in both directions but alternately. It currently only works when you want close popup.</p>
  
  <p><a href="https://jsfiddle.net/konradstrek/0bgtnLho/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>CSS</p>
  
  <pre><code>.e-p-main {
    margin-top: 40px;
    height: auto;
    width: 200px;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 99;
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    -o-transition: transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out;
  }
  
  .tsc_1 {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>$(document).ready(function() {
    $("#e_a_c").click(function(e) {
      $("#t_1").toggle();
      setTimeout(function() {
        $("#t_1").addClass("tsc_1");
      }, 1);
      e.stopPropagation();
    });
    $(document).click(function(e) {
      if (!$(e.target).is('#t_1 *')) {
        $("#t_1").removeClass("tsc_1");
        setTimeout(function() {
          $('#t_1').removeAttr('style');
        }, 150)
      }
    });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;a class="open-edit-popup" id="e_a_c"&gt;OPEN&lt;/a&gt;
  
  &lt;div id="e_a_p"&gt;
    &lt;div class="e-p-cont"&gt;
      &lt;div class="e-p-main" id="t_1"&gt;
        &lt;div class="e-p-text-1 dps"&gt;
          &lt;p&gt;test&lt;/p&gt;
          &lt;p&gt;test&lt;/p&gt;
          &lt;p&gt;test&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>