Css минимальная высота анимации в Mozilla не плавная

Question

Моя анимация работает в chrome и смелом браузере, однако на Mozilla у меня возникла эта проблема. (Я даже не чувствую, что пытаюсь использовать Explorer. :) любая помощь будет принята с благодарностью. Я хотел бы иметь эффект плавного открытия, который вы можете видеть при открытии с Chrome

Jsfiddle здесь

в прямом эфире

.tutsubopen{

animation: animateComment linear 4s;
    animation-iteration-count: 1 ;
    animation-duration: 4s;

    -webkit-animation: animateComment linear 4s;
    -moz-animation: animateComment linear 8s 1  ;
    -ms-animation: animateComment linear 4s;
      }
      
 
 

  @-moz-keyframes animateComment {
    10% {
      left:0px;
      min-height: 0 ;
      max-height: 0 ;

  }
  15%, 30% {
      left:-200px;
      min-height:  5rem !important ;
      max-height: 5rem !important ;

  }
  35%, 50% {
         min-height:  10rem !important ;
     max-height: 10rem !important ;
  }
  55%, 70% {
    min-height:  15rem !important ;
    max-height: 15rem !important ;
  }
  75%, 90% {
    min-height:  20rem !important ;
    max-height: 20rem !important ;
  }


}



  @keyframes animateComment {
   0%, 10% {
      left:0px;
      min-height: 0 !important ;
      max-height: 0 !important ;

  }
  15%, 30% {
      left:-200px;
      min-height:  5rem !important ;
      max-height: 5rem !important ;

  }
  35%, 50% {
         min-height:  10rem !important ;
     max-height: 10rem !important ;
  }
  55%, 70% {
    min-height:  15rem !important ;
    max-height: 15rem !important ;
  }
  75%, 90% {
    min-height:  20rem !important ;
    max-height: 20rem !important ;
  }
  }