title: display none breaks animation
body: <p>i want a certain div to be shown in certain circumstances, and i want it to be animated, at the start it should be invisible so...</p>
  
  <pre><code>.fixedNav{
      background-color: rgba(28,20,13, 0.75);
      position:fixed;
      color:white;
      width:60vw;
      margin-top:-50px !important;
      z-index: 1;
      display:none;
      opacity:0;
      transition:opacity .3s ease-in;
  }
  </code></pre>
  
  <p>and then i animate the opacity with css by adding this class, with jquery, to it:</p>
  
  <pre><code>.fixedNavActive{
      display: block;
      opacity:1;
  }
  </code></pre>
  
  <p>and it all works fine if i remove the display: none; from the main class, if i leave it there then the opacity isn't animated, it just appears, why does it break it and how can i make it animate the opacity instead of toggling it to 1?</p>