javascript - 尝试从 Javascript 修改 CSS3 动画时 Chrome 崩溃

Question

我有一个 HTML 文件:

<div id="container"></div>

我有一个定义了 CSS3 动画的样式表:

.image {
    position: absolute;
    -webkit-animation-name: image-create;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes image-create {
    from {
        width: 0px;
        height: 0px;
    }
    to {
        width: 500px;
        height: 500px;
    }
}

这应该使图像从 0x0 增长到 500x500。 在我的 Javascript 文件中，我有以下内容:

var findAnimation = function(name) {
    for (var i in document.styleSheets) {
        var styleSheet = document.styleSheets[i];
        for (var j in styleSheet.cssRules) {
            var rule = styleSheet.cssRules[j];
            if (rule.type === 7 && rule.name == name) {
                return rule;
            }
        }
    }
    return null;
}

var addImage = function(x, y, src) {
    var image = new Image();
    image.src = src;
    image.className = "image";
    image.style.width = "500px";
    image.style.height = "500px";
    image.style.left = x;
    image.style.top = y;
    image.onload = function() {
        document.getElementById("container").appendChild(image);
        var animation = findAnimation("image-create");
        for (var i in animation.cssRules) {
            var rule = animation.cssRules[i];
            if (rule.keyText == "0%") {
                rule.style.top = y;
                rule.style.left = x;
            }
            if (rule.keyText == "100%") {
                rule.style.top = 0;
                rule.style.left = 0;
            }
        }
    }
}

addImage(100, 100, "http://i.imgur.com/KGfgH.jpg");

调用 addImage() 时，我尝试在坐标 (x, y) 处创建图像。动画应该让它变大，同时从创建图像的位置 (x, y) 移动到左上角 (0, 0)。

相反，Chrome 只是崩溃到“哇，啪”页面。有谁知道为什么会这样？

编辑:这是一个例子。如果我访问它，这对我来说会崩溃:http://jsfiddle.net/LVpWS/10/

在这一行中，我注释掉了一些行并且它没有崩溃:http://jsfiddle.net/LVpWS/21/

EDIT2:如果我切换回 Chrome 20，它会起作用。

Answer 1

我已经找出错误:
将新属性添加到 WebKitCSSKeyframeRule 实例时，页面崩溃(啊，突然)。 可以使用以下代码在 Chrome 21.0.1180.57 中重现该错误:http://jsfiddle.net/LVpWS/68/

<style id="sheet">
@-webkit-keyframes test {
    from {}
}</style><script>
var keyFramesRule = document.getElementById('sheet').sheet.cssRules[0];
var keyFrameRule = keyFramesRule[0];
keyFrameRule.style.top = 0;</script>

当该属性已存在于规则中时，不会发生此崩溃。将 from {} 替换为 from{top:1px;} 以检查:http://jsfiddle.net/LVpWS/69/ .