css - 关键帧选取框过早结束

我找到了一个使用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>

有人对可能的原因有任何想法吗？

谢谢，
乔希

最佳答案

在进行此操作时，我意识到我不喜欢使用关键帧，因为速度似乎取决于选取框的时长，并且我不想每次决定更改选取框时都必须调整关键帧...也许这一直都是问题的一部分，不是很确定，因为我从来没有真正使用当前代码解决过这个问题。

我偶然发现了一个JavaScript字幕，认为这是我项目的最佳方法。

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

html看起来像：

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

CSS看起来像：

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

关于css - 关键帧选取框过早结束，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38352968/