Bounce Webkit Animation

Question

Das ist schwer zu erklären, ich werde es eine Chance geben.

Ich habe derzeit einen Bildhintergrund, der wie ein Förderband endlos von rechts nach links gleitet. Das Bild wiederholt sich nur, wenn es leer ist.

Ich versuche, das Bild/die Animation zu bouncen (umgekehrte Richtung), bevor es wiederholt wird. So gleitet das Bild langsam in die eine Richtung und dann langsam zurück in die andere Richtung.

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

Ich habe versucht, animation-direction: alternate; aber das kehrt einfach die ganze Animation :(

Bevor ich meinen Freund (wieder) um Hilfe kümmern, ich werde ich allerdings hier ausstrecken helfen. kann jemand?

Answer 1

wenn Sie nur 2D-Übersetzung tun in x Richtung, Sie translateX statt translate3d der Einfachheit halber verwenden können. Aber translate3d wird auch funktionieren, wenn Sie es vorziehen.

Um Ihre Frage zu beantworten, werde ich nur Standard-CSS (ohne Präfixe) zeigen. Sie können problemlos Präfixe hinzufügen. Übernehmen Sie diese Änderungen:

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

ich kopiert einfach den Wert -2250px aus dem Code. Sie müssen diesen Wert wahrscheinlich an Ihre Bedürfnisse anpassen.