I am doing a simple advertisement that alternates 4 images in the same div, but my problem is that the duration time between 4 is not right ... it stays one on top of the other in "messy" mode ", how could I do that so the 4 iamgens get synchronized ....
The code is as follows:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="title" content="#" />
<meta name="description" content="Free Web tutorials">
<meta name="author" content="#" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Banner</title>
<style type="text/css">
.azul{
width: 300px;
height: 250px;
background-image: url("images/fundo.png");
}
.img-3{
position:absolute;
animation-name: primeiro;
animation-duration: 2s;
animation-iteration-count: 15;
animation-direction: alternate;
animation-delay: 0s;
}
.img-4{
position:absolute;
opacity: 0;
animation-name: segundo;
animation-duration: 2s;
animation-iteration-count: 15;
animation-direction: alternate;
animation-delay:4s;
}
.img-5{
position:absolute;
opacity: 0;
animation-name: terceiro;
animation-duration: 2s;
animation-iteration-count: 15;
animation-direction: alternate;
animation-delay:6s;
}
.img-6{
position:absolute;
opacity: 0;
animation-name: quarto;
animation-duration: 2s;
animation-iteration-count: 15;
animation-direction: alternate;
animation-delay:8s;
}
/* Original */
@keyframes primeiro {
100%{
opacity: 0;
}
}
@keyframes segundo {
100%{
opacity: 1;
}
}
@keyframes terceiro {
100%{
opacity: 1;
}
}
@keyframes quarto {
100%{
opacity: 1;
}
}
</style>
</head>
<body>
<div class="azul">
<img src="images/03.png" class="img-3" />
<img src="images/04.png" class="img-4" />
<img src="images/05.png" class="img-5" />
<img src="images/04.png" class="img-6" />
</div>
</body>
</html>