title: CSS transition not working onclick
body: <p>I just want to show a notification alert on click in bottom left in my page. The notification box appears correctly but transition isn't working. I tried this way. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#notification-alert {
    display: none;
    font-family: 'Montserrat-regular';
    color: white;
    bottom: 20px;
    right: 20px;
    position: fixed;
    background-color: #f4b251;
    border-bottom: 4px solid #E89F3C;
    color: #fff;
    padding: 20px;
    border-radius: 14px;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 500ms;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type='submit' onclick='$("#notification-alert").show()'&gt;
  
  
  
  &lt;div id="notification-alert"&gt;
    &lt;span&gt;Great job, you're under way!&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the <a href="https://jsfiddle.net/jayD2/krg1yg6x/" rel="nofollow noreferrer">fiddle</a> What's wrong with the code?</p>