How can I slow/control the modal close animation in Bootstrap?

If you set a css animation for the modal open, the modal will respect that animation but, when you close the modal, it disappears without honoring the animation.

I'm confused because the bootstrap docs say "This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete)." https://getbootstrap.com/docs/4.0/components/modal/

Here is an example; https://jsfiddle.net/chaz7979/o04pxo88/3/

Notice how the modal slides down very slowly but disappears instantly. Is this a bug or am I missing some css?

Bug or not, is there a way to make the modal close/leave the same way it entered the page?

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CSS

   .modal.fade .modal-dialog {
        transition: 10s;
    }