キーフレームマーキーが途中で終了する

Question

CSSキーフレームを使用するマーキーが見つかりました。これを既存のサイトに組み込みたいのですが、マーキーが機能していますが、メッセージ全体がスクロールしません。壊れた部分は画面のサイズによって異なりますが、問題はキーフレームアニメーションと関係がありますが、わかりません。

私はからこれを得たオリジナルのフィドルがここにあります：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> 

この問題はで起こっているが、私は別の見ることができる唯一のことは、私のバージョンは、マーキーのために指定された幅を持っていないということです幅を持たないので、犯人ではないようです。

私が作成したバージョンがここにあります： 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> 

誰もが原因である可能性がありますどのように任意のアイデアを持っていますか？速度はマーキーがどのくらいに依存し、私はしたくないようにそれはそうなので

おかげで、
ジョシュ

Answer 1

私はこれに取り組んでいたように、私はキーフレームを使用して好きではなかったことに気づきましたマーキーを変更するたびにキーフレームを調整しなければならないかもしれません...おそらくそれは問題の一部であり、実際には現時点でのコードを使用してこの問題を解決したことはないからです。

私はJavaScriptのマーキーを見つけたので、それが自分のプロジェクトに最適なアプローチだと思います。 CSSがどのように見える

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

：

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

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

とJavaScriptは次のようになります。

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)); 
}); 

ようなHTMLが見え

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