2016-05-21 80 views
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;但只是顛倒了整個動畫:(

我打擾我的幫助的朋友(再次)之前,我雖然我伸手在這裏。誰能幫助?

回答

0

如果僅x方向做2D轉換,則可以使用translateX而不是translate3d爲了簡單,但translate3d也能發揮作用,如果你喜歡。

要回答你的問題,我只會顯示標準的CSS(帶前綴)。您可以輕鬆添加前綴。應用這些更改:

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

我剛剛從代碼中複製了值-2250px。您可能需要根據您的需求調整該值。

+0

謝謝你!這在我的1080x1920顯示器上效果非常好,但在其他分辨率下,它可以做各種瘋狂的事情。 http://exp.joshniesler.com。 –