CODEWITHSUNDEEP
htmlcssmarqueecss-animations
German Katz
German Katz

Reputation: 53

Trying to create a marquee in CSS3

i'm trying to create a marquee in full CSS3, but it doesn't move like it should

HTML: 

<div id="marquee">
    <ul class="li_patr">
        <li class="unstiled_li"><img id="element" src="img/thumb1.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb2.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb3.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb4.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb5.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb6.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb7.png"></li>
    </ul>
</div>

CSS:

#marquee{
width: 960px;
height: 160px;
overflow: hidden;
}
.li_patr{
width: 1500px;
}
.unstiled_li{
list-style: none;
margin-top: 0;
-webkit-animation: marquee 25s ease-in-out infinite;
}

Animation in css:

@-webkit-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@-moz-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@-ms-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@-o-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}

Here is the jsfiddle where i replace some images: http://jsfiddle.net/3ZaGk/

Upvotes: 0

Views: 1163

Answers (1)

Markus Bucher
Markus Bucher

Reputation: 356

You can try a solution like this: http://jonmifsud.com/open-source/jquery/jquery-webticker/

It offers an infinite webticker.

Upvotes: 1

Related Questions