Q:

How to change the accordian animation while closing using angular2 and CSS

I have an accordion.. while opening it is opening slowly but while closing its closing very fasting within fraction of ms range.  Kindly help me to change the animation while closing. 
I am here by sharing my HTML and css code, 
Please help. 
HTML Code:
<accordion>
 <accordion-group #groupUser class="outer admin">
    <div accordion-heading >
           ABCD
      <i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': ! groupUser?.isOpen}"></i>
     </div>
     <div layout="row" class="row listing-element tracking-listing">
    <div layout="row">                     
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Car</div>
     </div>
     </div>
      <div layout="row">
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Bike</div>
      <div layout="row">
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Auto</div>
      </div>
      </div>
    </accordion-group>
</accordion>

CSS:
 #wd-faq .outer .panel-collapse .panel-body {
        margin-top: 18px;
        border: 0;
        background-color: blue;
        -webkit-animation:all 150ms;
        overflow:hidden;
    }
    @keyframes all {
        0% {
            height:0px;
        }
        100% {
            height:auto;
        }
    }

The CSS i pasted above is of opening accordion.  Help me for Closing accordion. 
Thanks in Advance. 

A:

Try like this in yout HTML Code

HTML CODE

    <accordion>
         <accordion-group #groupUser class="outer admin">
            <div accordion-heading >
                   ABCD
              <i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': ! groupUser?.isOpen}"></i>
             </div>
    <div class="slideInDown">
    </div>
<accordion-heading>
<accordion>

and change your CSS with these codes

CSS

    .slideInDown{
 -webkit-animation-name: slideInDown;
 animation-name: slideInDown;
 -webkit-animation-duration: 80ms;
 animation-duration: 80ms;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes slideInDown {
 0% {
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 visibility: visible;
 }
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
}
@keyframes slideInDown {
 0% {
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 visibility: visible;
 }
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
}

I dont know it satisfies your requirement properly or not but you can try once.