Question

我正在使用CSS3创建一个简单的水平新闻自动收录器：

transition: right 13s linear 0ms

这在webkit中非常有用，但是在Firefox中它适用于13s然后停止。

为什么webkit会无限延续滚动，但gecko不会？

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

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

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

Answer 1

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

13s是持续时间，因此显然会在13秒后停止。它不应该永远重新开始！要理解为什么它在webkit上，我需要更多的细节（完整的代码，浏览器和你正在测试它的版本）。

您需要animation。这是一个小例子：

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

（向outerWidth添加TRUE，使其查看边距和填充）

现在一切都很好！

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

使用css3过渡的无限滚动工作在webkit但不是gecko

2 个答案: