So erstellen Sie Marquee Infinite Loop of Logos Slider nur mit CSS ⇐ HTML

[Anonymous]

Im Moment lässt mein Code die Logos von rechts nach links animieren und sobald er das Ende trifft, startet er neu. Wie kann ich es in einer Schleife fortsetzen, damit das erste Logo dem letzten folgt, wenn ein neuer Zyklus beginnt? class = "snippet-code">

Code: Select all

img {
width: 100px;
}
.marquee {
position: relative;
width: 100%;
height: 100px;
border: 1px solid black;
overflow: hidden;
}
.marquee div {
display: block;
position: absolute;
width: 300%;
overflow: hidden;
animation: marquee 20s linear infinite;
}
.marquee div:hover {
animation-play-state: paused;
}
.marquee span {
float: left;
width: 50%;
}

@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}< /code>


[img]http://static.bragdeal.com/logo.png[/img]
[img]http://static.bragdeal.com/logo.png[/img]
[img]http://static.bragdeal.com/logo.png[/img]
[img]http://static.bragdeal.com/logo.png[/img]
[img]http://static.bragdeal.com/logo.png[/img]
[img]http://static.bragdeal.com/logo.png[/img]
[img]http://static.bragdeal.com/logo.png[/img]
[img]http://static.bragdeal.com/logo.png[/img]