Pure CSS Continuous Horizontal Text Scroll Without Break

I’m trying to create a news ticker with horizontal text that scrolls continuously without a break between loops. Ideally, the solution would be pure css/html, but I don’t know if that’s possible. Here’s my rudimentary attempt so far: http://jsfiddle.net/lgants/ncgsrnza/. Note that the fiddle contains an unwanted break between each loop.

<p class="marquee"><span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text</span></p>


.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
}


You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).