<ul id="foo">
<li>You have cat to be kitten me right meow</li>
<li>Eat plants, meow, and throw up</li>
<li>My owner today cough furball into food bowl</li>
<li>I shredded your linens for you</li>
<li>Play time carefully drink from water glass</li>
<li>Jump on human and sleep on her all night long</li>
<li>Purr in the morning and then give a bite to every human around</li>
<li>Waking up request food, purr loud scratch the walls</li>
</ul>
.loop(@counter, @display) when (@counter > 0) {
.loop(@counter - 1, @display);
li:nth-child(@{counter}) {
display: @display;
}
}
ul li {
display: none;
}
ul {
//list-style: decimal;
.loop(4, list-item);
}
View Compiled
setInterval(firstToEnd, 1000);
function firstToEnd() {
const firstElem = foo.firstElementChild;
foo.appendChild(firstElem);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.