Question

我正在创建一个小型网站，通过使用CSS和精灵动画来讲述故事。

我遇到的问题是，一旦我在css文件中设置关键帧，我就不知道如何更改关键帧，特别是当我尝试使其与所有浏览器兼容时。

这就是我所拥有的，

css的主要部分：

#ManSprite{
    overflow:hidden;
    width:200px;
    height:200px;
    position:absolute;
    top:280px;
    left:140px;
    background-image: url("http://imageshack.com/a/img571/1710/2r1h.png");
    z-index:99;
    animation: play .4s steps(2) infinite;
    -webkit-animation: play .4s steps(2) infinite;
    -moz-animation: play .4s steps(2) infinite;
    -ms-animation: play .4s steps(2) infinite;
    -o-animation: play .4s steps(2) infinite;
}

@keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-webkit-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-moz-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-ms-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-o-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

然后在我的javascript中，我想更改每个关键帧的背景位置，但我不知道如何更改它。我尝试过以下但是没有用。

var StoryPart = 0;

var fromArray = new Array("0px", "-200px", "-800px", "-1400px", "-2200px", "-3200px");
var toArray = new Array("0px", "-600px", "-1400px", "-2200px", "-3230px", "-4000px");
var stepsArray = new Array(0, 2, 3, 4, 5, 4);


function nextBtn() {
    StoryPart++;

    startChange();

}

// begin the new animation process
function startChange() {
    // remove the old animation from our object
    document.getElementById('ManSprite').style.webkitAnimationName = "none";
    document.getElementById('ManSprite').style.animationName = "none";
    document.getElementById('ManSprite').style.msAnimationName = "none";
    document.getElementById('ManSprite').style.oAnimationName = "none";
    document.getElementById('ManSprite').style.mozAnimationName ="none";

    // call the change method, which will update the keyframe animation
    setTimeout(function () { change("play", fromArray[StoryPart], toArray[StoryPart]); }, 0);
}


// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule) {
    // gather all stylesheets into an array
    var ss = document.styleSheets;

    // loop through the stylesheets
    for (var i = 0; i < ss.length; ++i) {

        // loop through all the rules
        for (var j = 0; j < ss[i].cssRules.length; ++j) {

            // find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule
                || ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name == rule
                )
                return ss[i].cssRules[j];
        }
    }

    // rule not found
    return null;
}

// remove old keyframes and add new ones
function change(anim, fromValue, toValue) {
    // find our -webkit-keyframe rule
    var keyframes = findKeyframesRule(anim);

    // remove the existing 0% and 100% rules
    keyframes.deleteRule("0%");
    keyframes.deleteRule("100%");

    // create new 0% and 100% rules with random numbers
    keyframes.insertRule("0% {background-position: " + fromValue + ";}");
    keyframes.insertRule("100% {background-position: " + toValue + ";}");

    // assign the animation to our element (which will cause the animation to run)
    document.getElementById('ManSprite').style.webkitAnimationName = anim;
    document.getElementById('ManSprite').style.animationName = anim;
    document.getElementById('ManSprite').style.msAnimationName = anim;
    document.getElementById('ManSprite').style.oAnimationName = anim;
    document.getElementById('ManSprite').style.mozAnimationName = anim;

}

出于某些原因，在Chrome中，它在findKeyframesRule方法中找不到任何cssRule，但在firefox中却有。但是，Firefox在这一行崩溃了

keyframes.insertRule("0% {background-position: " + fromValue + ";}");

让我困惑，因为它能够很好地使用deleteRule。

有人用这些吗？

使用Javascript更改css中的不同关键帧

0 个答案: