如何延迟淡出

Question

我做了一个非常基本的滑块，显示了一些数据库的记录。我使用fadeinout来产生淡化效果。但不知怎的，我无法修复延迟的淡出。现在div消失并立即淡出而没有延迟fadeOut。那么我怎样才能确保div在几秒钟后消失，同一div消失？

这是我使用的代码（首先是.css，然后是.php）：

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} //Laat hem loopen
    x[slideIndex-1].style.display = "block"; //Laat zien als blok (blokkeert display="none")
    setTimeout(carousel, 5000); //Tijd instellingen (iedere 1000 = 1 seconde)
	

}

.mySlides {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    opacity: 1;
    -webkit-animation: fadeinout 1s linear forwards;
    animation: fadeinout 1s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

<?php
	$con = mysqli_connect('localhost','dbusername','dbpassword');
	
	if (!$con)
	{
		echo 'Geen verbinding met server';
	}
	
	if (!mysqli_select_db($con, 'eventqy179_postwall'))
	{
		echo 'Database niet geselecteerd';
	}
	
	$sql = "SELECT * FROM postwall
			ORDER BY id DESC";
	$query = mysqli_query($con,$sql);
	
	if(!$query)
	{
		echo 'Onbekende fout gevonden';
	}
	
	while ($row = mysqli_fetch_array($query))
	{
		
		echo '<div class="mySlides">'.$row['bericht'].'</div>';
		
	}
?>