Improved Version of Creating Advanced "Marquee" with CSS3 Animation with only one animation for all news items.
For n items, create (n - 1) delays for all elements except the first one with an ascending duration of (anim-time / n) seconds for each item. Then also repartition the first four keyframes to a percentage of (100 / n).
<div class="marquee">
<div class="marquee">
<p>Brisante News #1</p>
<p>Brisante News #2</p>
<p>Brisante News #3</p>
<p>Brisante News #4</p>
<p>Brisante News #5</p>
</div>html, body {
html, body {
background: url('http://subtlepatterns.com/patterns/skewed_print.png');
}
/* container for news items */.marquee {width: 500px;
height: 50px;
margin: 25px auto;
overflow: hidden;
position: relative;
border: 1px solid #000;
border-radius: 5px;
background-color: #222;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5),
0px 1px 0px rgba(250, 250, 250, .2);
counter-reset: marqueeindex;
}
/* paragraphs with news */.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
color: #fff;
text-align: center;
font-family: Tahoma, Arial, sans-serif;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
line-height: 50px; /* height of ontainer */
transform: translateY(-100%); /* start above container */
}
/* prepend number for each paragraph */.marquee p:before {
counter-increment: marqueeindex;
content: counter(marqueeindex) ": ";
}
/* use same animation for each paragraph */.marquee p {
animation: shownews 20s ease infinite;
}
/* ascending animation delay after first news item */.marquee p:nth-child(2) { animation-delay: 4s; }
.marquee p:nth-child(3) { animation-delay: 8s; }
.marquee p:nth-child(4) { animation-delay: 12s; }
.marquee p:nth-child(5) { animation-delay: 16s; }
/* pause animation on hover */.marquee:hover p {
animation-play-state: paused;
}
/* animation for displaying one element */@keyframes shownews {
0% {transform:translateY(-100%);
}
5% {transform:translateY(0);
}
15% {transform:translateY(0);
}
20% {transform:translateY(100%);
}
100%{transform:translateY(100%);
}
}