Keyframe marquee ends prematurely

I found a marquee that uses CSS keyframes and wanted to incorporate that into an existing site...the marquee is working, but the entire message doesn't scroll. Where it breaks depends on the size of your screen, I'm pretty sure the problem has something to do with the keyframe animation, but I'm not sure.

The original fiddle I got this from is available here: https://jsfiddle.net/kangrian/9JHTv/

/* Marquee Effect with Pure CSS3 Animation */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
    -webkit-animation: marquee 50s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* Dibawah adalah Keyframe Marquee */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}
@-webkit-keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

<p class="marquee">Hidup adalah Pilihan! Pintar-pintar lah dalam Memilih .. ( <a href="http://rian-nurherdian.blogspot.com">Rian Nurherdian</a> )</p>

The only thing I can see different is that my version doesn't have a width specified for marquee, although this problem is happening with or without a width, so that doesn't seem to be the culprit.

The version I created is available here: https://jsfiddle.net/6qs2g20o/1/

#marquee:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

#marquee span {
    float: left;
}

#marquee p {
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    /* Animation */
    animation: marquee 50s linear infinite;
    -webkit-animation: marquee 50s linear infinite;
}

#marquee p:hover {
    /* Animation */
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes marquee {
    0% { text-indent: 27.5em }
    100% { text-indent: -105em }
}

@-webkit-keyframes marquee {
    0% { text-indent: 27.5em }
    100% { text-indent: -105em }
}

<div id="marquee">
    <span>Latest News</span>
    <p>The El Paso Baseball Hall of Fame Board of Directors meets tomorrow Wednesday July 13 at the Wyndham Hotel starting at 5:30 PM . . . “From a Silver Past to a Golden Future – – We Honor Excellence” . . . For Tuesday July 12, our El Paso Baseball Hall of Fame continues our “Sensational 7 Roll Call” featuring 7 Inductees at a time on our scrolling marquee: Class of 1991 Honoree Frank “Herbie” Johnson the record-setting star at Bel Air High School, signed by San Francisco Giants in 1961, made his Major League debut in 1966 and he also played professionally in Japan; El Paso Baseball Hall of Fame Son/Father duo Member and Class of 2013 Honoree Frank Anthony Castillo the All District and All City player at Eastwood High School, signed with the Chicago Cubs in 1987, in his Major League debut he tossed 8 shutout innings against the Pittsburgh Pirates, pitched with the Chicago Cubs, Colorado Rockies, Detroit Tigers, Toronto Blue Jays and the 2004 World Champion Boston Red Sox and he pitched 297 games in his 13-year Major League career; Class of 2001 Honoree Frank “Conkin” Campos who played Semi-Pro baseball for over 50 years, always batted over .300 and he was a 19X Semi-Pro All Star selection and El Paso Baseball Hall of Fame Board of Directors, Brother/Brother duo Member and Class of 2010 Honoree Frank Del Toro the All District player for Jefferson High School, played collegiately at Ranger Junior College, UTEP and New Mexico Highlands, batted .327 in 56 games with the Juarez Indios in the Mexican League, won batting titles and earned MVP honors as a hitter and pitcher in the Liga Fronteriza, coached Austin High School to Area Round of playoffs, earned High School “Coach of the Year” honors and he has been inducted into 5 different Halls of Fame . . . “Thank You” for your continued support!</p>
</div>

Does anyone have any ideas on what could be the cause?

Thanks,
Josh

Solution

As I was working on this, I realized that I didn't like using keyframes because it seems like the speed depends on how long the marquee is and I don't want to have to adjust the keyframe every time I decide to change the marquee...maybe that was part of the problem all along, not sure really, because I never really solved the issue using the current code.

I stumbled across a JavaScript marquee and think that's the best approach for my project.

http://jsfiddle.net/4mTMw/1333/

The html looks like:

<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

The css looks like:

div.marquee {
    white-space: no-wrap;
    overflow: hidden;
}

div.marquee > div.marquee-text {
    white-space: nowrap;
    display: inline;
    width: auto;
}

and the JavaScript looks like:

var marquee = $('.marquee');
var go = true;

marquee.hover(
    function() {
        go = false;
    },
    function() {
        go = true;
    }
);

marquee.each(function() {
    var mar = $(this),
        indent = mar.width();
mar.marquee = function() {
    if (go) {
        indent--;
        mar.css('text-indent', indent);
        if (indent < -1 * mar.children('.marquee p').width()) {
            indent = mar.width();
        }
    };
  }
mar.data('interval', setInterval(mar.marquee, 1000 / 60));
});