when I click on arrow icon in FaQ the arrow icon is turning very fast to opposite position?I want it to turn slowly!

.flex-container-contact-page-section2 {
 
	width:100%;
	margin-left:0;
	padding-left:0;
 
}
 
 
 
.container-faq{
	width:70%;
    margin-left:4%;
	float:left;
 
 
 
 
 
 
}
.container-faq h2 {
	padding:1rem 48px;
 
	 color: #ffd978;
 
}
.accordion {
	border:0.2px solid  #4b5054;
border-top-left-radius:5px;
border-top-right-radius:5px;
 width:60%;
  background-color: #4b5054;
  color: #ffd978;
  cursor: pointer;
  padding: 18px;
   text-align: left;
   font-size: 15px;
  transition: 0.4s;
  margin-left:4%;
  margin-top:1rem;
}
 
 
 
 
 
 
.accordion:after {
  content: "\02C5";
   color: #ffd978;;
  font-weight: bold;
  float: right;
  margin-left: 5px;
 
}
 
.active:after {
  content: "\02C4";
	 color: #ffd978;
 
  transition-timing-function: 4s ease-out;
 
}
 
.panel {
  padding: 0 18px;
  background-color:#4b5054;
  max-height:0;
  overflow: hidden;
 	text-align:justify;
    font-size:1.25rem;
	width:60%;
	max-width:800px;
	margin-left:4%;
	color:#ffd978;
	border:0.2px solid #4b5054;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

<div class="flex-container-contact-page-section2">
<div class="container-faq">
<h2>Vaak Gestelde Vragen</h2>
<div class="accordion">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="panel">
<h6>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq</h6>
</div>
<div class="accordion">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="panel">
<h6>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusm</h6>
</div>
<div class="accordion">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="panel">
<h6>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t.</h6>
</div>
</div>
<div class="container-form"></div>
</div>

<script>
var acc = document.getElementsByClassName('accordion');
var len = acc.length;
for (var i = 0; i < len; i++) {
  acc[i].addEventListener('click', event => {
    const accordion = event.currentTarget;
    const currentlyActiveAccordion = document.querySelector('.accordion.active');
    if (currentlyActiveAccordion && currentlyActiveAccordion !== accordion) {
      currentlyActiveAccordion.classList.toggle('active');
      currentlyActiveAccordion.nextElementSibling.style.maxHeight = 0;
    }
    accordion.classList.toggle('active');
    var panel = accordion.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px'
    }
  });
}
 
	</script>