Question

这很难解释，我会给它一个机会。

我目前的图像背景从右到左无休止地滑动，就像传送带一样。图像在耗尽时重复。

我试图在重复之前让图像/动画反弹（反方向）。因此，图像以一种方式缓慢滑动，然后慢慢向后滑动。

CSS：

#bg {
    -moz-animation: bg 60s linear infinite;
    -webkit-animation: bg 60s linear infinite;
    -ms-animation: bg 60s linear infinite;
    animation: bg 60s linear infinite;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

    background: #348cb2 url("images/cns-lagoon-sunrise.jpg") bottom left;
    background-repeat: repeat-x;
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
}

@-moz-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@-webkit-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@-ms-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

#bg {
    background-size: 2250px auto;
    width: 6750px;
}

我试过了animation-direction: alternate;，但这只是颠倒了整个动画:(

在我打扰我的朋友（再次）寻求帮助之前，我虽然在这里伸出援助之手。有人可以帮忙吗？

Answer 1

如果您仅在x方向进行2D翻译，为简单起见，您可以使用translateX代替translate3d。但如果您愿意，translate3d也会有效。

要回答您的问题，我只会显示标准css（带前缀）。您可以轻松添加前缀。应用这些更改：

@keyframes bg {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-2250px);
    }
    100% {
        transform: translateX(0);
    }
}

我刚从代码中复制了值-2250px。您可能需要根据需要调整该值。

弹跳webkit动画

1 个答案: