I'm working on putting a marquee onto my website and I found a web tutorial that would do exactly two items :
http://www.hongkiat.com/blog/css3-animation-advanced-marquee/
I need this to work for as many items as there are in the .marquee class because I'm reading them in from a database. it works great if i just have a p:nth-child(1), but i don't know how many children there will be at any given time.
The HTML:
<body>
<p>
<div class="marquee">
<p>This is the first text.</p>
<p>This is the second.</p>
<p>Some other announcement here.</p>
<p>Hello World.</p>
<p>Something Here.</p>
<p>Last Announcement.</p>
</div>
</p>
</body>
The CSS:
.marquee {
width: 500px;
height: 50px;
margin: 25px auto;
overflow: hidden;
position: relative;
border: 1px solid #000;
margin: 25px auto;
background-color: #222;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
}
.marquee p {
position: absolute;
font-family: Tahoma, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
.marquee p {
transform:translateX(100%);
}
@keyframes left {
0% {
transform:translateX(100%);
}
10% {
transform:translateX(0);
}
40% {
transform:translateX(0);
}
50% {
transform:translateX(-100%);
}
100% {
transform:translateX(-100%);
}
}
.marquee p:nth-child(n) {
animation: left 10s ease infinite;
}
Any help would be greatly appreciated.
You have to pass the item count as HTML attribute, for example as
class='marquee item-count-5'and then assign the according keyframes to the child elements.There is no clean solution using CSS only, because:
You can do this only through defining multiple @keyframe definitions, because using animation-delay and the same keyframes does not work as you cannot create delays in between the animations. This is my unfinished, because unsuccessful hack: http://codepen.io/franzskuffka/pen/XbzRBY