Question

我有这样的动画：

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

Answer 1

我建议使用transition代替动画，如下所示：

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

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

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

Answer 2

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

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 
    }
}

如何将JavaScript变量传递给我的CSS3动画？

2 个答案: