title: Custom animation for bootstrap modal not working on closing because of display attribute added by bootstrap
body: <p>I've created a div in which I'm using bootstrap modal. </p>
  
  <pre><code>&lt;div id="closeMessageHolder" class="modal md-effect-1" role="dialog" data-backdrop="static" data-keyboard="false"&gt;
      &lt;div class="modal-content"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I want to add some custom animation for which I'm using this CSS code for custom animation. </p>
  
  <pre><code>.md-effect-1 .modal-content {
      -webkit-transform: scale(0.7);
      -moz-transform: scale(0.7);
      -ms-transform: scale(0.7);
      transform: scale(0.7);
      opacity: 0;
  }
  
  .show.md-effect-1 .modal-content {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
  }
  </code></pre>
  
  <p>Show and hide the modal on a button click using</p>
  
  <pre><code>$("#id1").modal("toggle");
  </code></pre>
  
  <p>The problem is that the animation works properly on the time of showing the modal. but at the time of disappearing the modal, it shows no animation.
  I find that a <code>display:none</code> property is added inline at the parent div on the time of closing the modal. Does it is the reason of not showing the animation or have any error in my css code?
  Is there have any other alternative ideas or fixes for this? </p>