用 javascript 注入的 CSS3 关键帧不适用于 Chrome答案

【问题标题】：CSS3 Keyframe injected with javascript does not work with Chrome用 javascript 注入的 CSS3 关键帧不适用于 Chrome
【发布时间】：2013-12-04 18:25:56
【问题描述】：

我正在使用 javascript 创建一个关键帧，因为我想知道特定元素的宽度，以便使用它来应用动画样式。

代码如下：

var animation = false,
    animationstring = 'animation',
    prefix = '',
    domPrefixes = 'Webkit Moz O ms'.split(' '),
    pfx  = '',
    elm = document.querySelector('.marquee');

// Checks if the animation implementation is unprefixed
if( elm.style.animationName ) { animation = true; }

// Apply correct prefixes if the animation implementation has prefixes
if( animation === false ) {
    for( var i = 0; i < domPrefixes.length; i++ ) {
        if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
            pfx = domPrefixes[ i ];
            animationstring = pfx + 'Animation';
            prefix = '-' + pfx.toLowerCase() + '-';
            animation = true;
            break;
        }
    }
}

elm.style[ animationstring ] = 'marquee 20s linear infinite';
var keyframes = '@' + prefix + 'keyframes marquee { '+
    '0% { ' + prefix + 'transform: translateX(100%);}'+
    '100% { ' + prefix + 'transform: translateX(-' + elm.scrollWidth + 'px);}'+
    '}';

document.styleSheets[0].insertRule( keyframes, 0 );

http://jsfiddle.net/69PXa/

我的问题（我认为）在第 27 行，我应用 elm.scrollWidth 作为 translateX 的值。这显然破坏了 Chrome 中的关键帧，而它在 Firefox 中应该正常工作。如果我只使用固定数字，动画就可以工作。

有没有办法解决这个问题？

【问题讨论】：

标签： javascript css css-animations

【解决方案1】：

在定义实际关键帧后，您必须将 CSS 应用到您的 .marquee。现在你告诉浏览器使用不存在的关键帧动画还。

JSFiddle

【讨论】：

【解决方案2】：

也许是这个：scrollWidth/scrollHeight give invalid dimensions

或者这个：Is "ScrollWidth" property of a span not working on Chrome?

可以帮助你;-)

问候。

【讨论】：