关键帧选取框提前结束

Question

我找到了一个使用 CSS 关键帧的选取框，并想将其合并到现有站点中...选取框可以正常工作，但整个消息不会滚动。它在哪里中断取决于你的屏幕大小，我很确定问题与关键帧动画有关，但我不确定。

原始 fiddle 我从这里得到这个：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 选取框，我认为这是我项目的最佳方法。

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

关键帧选取框提前结束

Keyframe marquee ends prematurely

css

marquee

css-animations