2

我有这样的动画：

@-webkit-keyframes slideImg0
    0%
        background-position: center 0px
    40%
        background-position: center -50px
    55%
        background-position: center 50px
    75%
        background-position: center 500px
    85%
        background-position: center 510px
    100%
        background-position: center 500px

但是我需要这个动画对于 4 个不同的图像略有不同。目前我有slideImg1（完全相同，但所有像素值都是+500）、slideImg2 和slideImg2。浪费时间/空间，而且不是很容易维护。

有什么方法可以从 JavaScript 传递一个值来改变它？这样我就可以去“运行所有值+500px的slideImg”？代替

$(".heroImgWrapper").css("-webkit-animation", "slideImg" +counter + " 1s linear");
4

2 回答 2

4

我建议使用 atransition而不是动画，如下所示：

transition:background-position 1s cubic-bezier(0,-1,0.8,1.3);

根据需要调整数字，但基本上控制点在 0-1 范围之外的曲线会产生反弹效果，就像您的动画似乎试图创建的那样。使用此策略，您可以根据需要调整位置并让过渡完成工作。

编辑：当然，你也需要-webkit-transition。另外，请参阅http://cubic-bezier.com/以设计合适的曲线。

于 2013-04-30T01:02:24.497 回答
0

这是您可以使用的代码，只需传入您的选择器和所需的增量：

function setCss(selector, delta) {
    var points = {
        0: 0,
        40: 55,
        55: 50,
        75: 500,
        85: 510,
        100: 500
    };
    if (typeof delta === "undefined") delta = 0;

    var newPoints = {};
    for (key in points) {
        newPoints[key] = points[key] + delta;
    }

    for (key in newPoints) {
        // Write your code here 
    }
}
于 2013-04-30T01:03:59.620 回答