(What I’ve tried is based on another post here)
I want ‘kenny.jpg’ to be the starter image, after three seconds, it changes to ‘kyle.png’, after three seconds, to ‘cartman.jpg’, after three seconds to ‘stan.jpg’and finally after those three seconds to kenny again, on loop with 1.5s fade between each image
So far, this is my code:
<!DOCTYPE html>
<html>
<head>
<title>Prueba Animaciones</title>
<style>
.images {
overflow: hidden;
animation: fade 1.5s infinite alternate;
}
@keyframes fade {
0% {opacity: 1;}
25% {opacity: 1;}
50% {opacity: 0;}
75% {opacity: 0;}
}
</style>
</head>
<body>
<div class="images">
<img src="kenny.jpg">
<img src="kyle.png">
<img src="cartman.jpg">
<img src="stan.png">
</div>
</body>
</html>