I have this kind of carousel of 8 photos, sliding from right to left in 9 seconds, everyone equally distanced from each other in an infinite loop.
PROBLEM: the last ones (starting from n.5) disappear before the loop is over.
QUESTION: how can I extend the duration of the last 4 photos without altering the distance from each other? For example, if I set the duration of photo n. 8 to 12 seconds, its position changes. I'd like to keep its position, extending the time it shows up.
Here's the code (I know it's an HTML 4.01 page but it should work despite its version):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<style>
.marquee {
background-color: #d21404;
width: 706px;
height: 128px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
position: relative;
left: 100%;
animation: marquee 9s linear infinite;
}
.marquee:hover span {
animation-play-state: paused;
}
.marquee span:nth-child(1) {
animation-delay: 0s;
}
.marquee span:nth-child(2) {
animation-delay: 0.08s;
}
.marquee span:nth-child(3) {
animation-delay: 0.16s;
}
.marquee span:nth-child(4) {
animation-delay: 0.24s;
}
.marquee span:nth-child(5) {
animation-delay: 0.32s;
}
.marquee span:nth-child(6) {
animation-delay: 0.40s;
}
.marquee span:nth-child(7) {
animation-delay: 0.48s;
}
.marquee span:nth-child(8) {
animation-delay: 0.56s;
}
@keyframes marquee {
0% { left: 100%; }
100% { left: -100%; }
}
</style>
<body>
<div class="marquee">
<span><a href="."><img src="1.jpg" width="160" height="128"></a></span>
<span><a href="."><img src="2.jpg" width="160" height="128"></a></span>
<span><a href="."><img src="3.jpg" width="160" height="128"></a></span>
<span><a href="."><img src="4.jpg" width="160" height="128"></a></span>
<span><a href="."><img src="5.jpg" width="160" height="128"></a></span>
<span><a href="."><img src="6.jpg" width="160" height="128"></a></span>
<span><a href="."><img src="7.jpg" width="160" height="128"></a></span>
<span><a href="."><img src="8.jpg" width="160" height="128"></a></span>
</div>
</body>
</html>