0
這很難解釋,位我會給它一個鏡頭。反彈webkit動畫
我目前有一個圖像背景,無限地從右到左滑動,就像一個傳送帶。圖像在耗盡時重複。
我試圖讓圖像/動畫在重複之前反彈(反向)。因此,圖像緩慢地向一側滑動,然後以另一種方式緩慢回退。
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;
但只是顛倒了整個動畫:(
我打擾我的幫助的朋友(再次)之前,我雖然我伸手在這裏。誰能幫助?
謝謝你!這在我的1080x1920顯示器上效果非常好,但在其他分辨率下,它可以做各種瘋狂的事情。 http://exp.joshniesler.com。 –