CSS keyframe animation for use with display:none

accordion-css-slide-open.scss

@include keyframes(slideInAccordion) {
  0% {
    min-height: 0;
    max-height: 0;
    display: none;
  }

  1% {
    min-height: 0;
    max-height: 0;
    display: block;
  }

  99% {
    min-height:none;
    max-height:50em;
    display: block;
  }

  100% {
    min-height:none;
    max-height:none;
    display: block;
  }
}

.accordion-content {
    display:none;
    min-height: 0;
    max-height: 0;
    overflow:hidden;

    @include animation-name(slideInAccordion);

    &.accordion-open {
        display:block;
        min-height:none;
        max-height:none;

        @include animation-duration(500ms);
    }
}