css - 使用在 webkit 但不是壁虎的 css3 转换进行无限滚动

Question

我正在使用这个 CSS3 创建一个简单的水平新闻代码：

transition: right 13s linear 0ms

这在 webkit 中效果很好，但是在 Firefox 中它适用于 13 秒然后停止。

为什么 webkit 会继续无限滚动，而 gecko 不会？

编辑：这是一个独立的例子

http://alexcrooks.me/others/newstest/

编辑：现在已修复，请参阅下面的答案。感谢任何确实看过的人。

Answer 1

您不需要该0ms值，因为它是延迟，默认情况下已经为 0。

13s是持续时间，所以它显然会在 13 秒后停止。它不应该永远重复！要了解它为什么在 webkit 上运行，我需要更多详细信息（完整代码、浏览器和您正在测试它的版本）。

你需要一个动画。这是一个小例子：

@-webkit-keyframes scroller { /* webkit */
    0% {
        left: 0;
    }
    100% {
        left:-100%; /* adjust it to your needs */
    }
}
@-moz-keyframes scroller { /* gecko */
    0% {left: 0;}
    100% {left:-100%;}
}
@-ms-keyframes scroller { /* IE10 */
    0% {left: 0;}
    100% {left:-100%;}
}
@keyframes scroller { /* W3C and future browsers */
    0% {left: 0;}
    100% {left:-100%;}
}

.yourElementClass {
    -webkit-animation-name: scroller;
    -webkit-animation-duration: 13s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite; /* set loop */
    -webkit-animation-direction: alternate; /* read below */
    -moz-animation-name: scroller;
    -moz-animation-duration: 13s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;   
    -moz-animation-direction: alternate;       
    -ms-animation-name: scroller;
    -ms-animation-duration: 13s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;    
    -ms-animation-direction: alternate;
    animation-name: scroller;
    animation-duration: 13s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;    
    animation-direction: alternate;
}

为了清楚起见，我单独声明了每个属性，但您也可以使用简写语法animation:scroller 13s linear infinite alternate;（显然带有供应商前缀）。

现在，关于animation-direction. 如果设置为alternate，动画结束后会向后运行，从而产生很好的平滑效果。

如果它不是您想要的，请不要设置它 ( animation:scroller 13s linear infinite;)，它将采用其默认值：normal. 13 秒后，它将从头开始。

Answer 2

好的，我解决了这个问题。我所做的更改是：

setTimeout(function() {
    eltape.css({"webkitTransitionDuration":dur+'s', "mozTransitionDuration":dur+'s', "oTransitionDuration":dur+'s', "transitionDuration":dur+'s'});
    eltape.css({right:0+'px'});
}, 1);

（将超时 ms 更改为 1 而不是 0）

widths['seg'+$(this).attr('seg')] += $(this).outerWidth(true);
widths.total += $(this).outerWidth(true);

（将 TRUE 添加到 outerWidth 以便它查看边距和填充）

现在一切都很好！

http://alexcrooks.me/others/newstest/