css - 弹跳 webkit 动画

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; 但这只会反转整个动画 :(

在我(再次)打扰我的 friend 寻求帮助之前，我想我会联系这里。谁能帮忙？

Answer 1

如果您只在 x 方向上进行 2D 平移，为了简单起见，您可以使用 translateX 而不是 translate3d。但如果您愿意，translate3d 也可以正常工作。

为了回答您的问题，我将只显示标准的 css(没有前缀)。您可以轻松添加前缀。应用这些更改:

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

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