Wie verwende ich CSS3 animate, um das Hintergrundbild eines Divs nach oben und unten zu verschieben?

Question

<div class="abc"> 
</div> 


.abc{ 
    background: url("blah.jpg") no-repeat; 
    width:200px; 
    height:200px; 
} 

Mein Hintergrundbild ist 200 x 600. Wie kann ich es nach oben und unten den div (Ich will die div 200x200 bleiben, aber je länger Bild geht rauf und runter.)

ich nicht möchte dazu Javascript verwenden. (Weil es auf diese Weise tun, wird nicht die Hardware verwenden und wird langsam sein.)

Answer 1

@keyframes bounce-background { 
    from { 
     background-position: top; 
    } 
    50% { 
     background-position: bottom; 
    } 
    to { 
     background-position: top; 
    } 
} 
.abc { 
    animation-name: bounce-background; 
    animation-timing-function: ease-in-out; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 

    /* For Chrome & Safari */ 
    -webkit-animation-name: bounce-background; 
    -webkit-animation-timing-function:ease-in-out; 
    -webkit-animation-duration:2s; 
    -webkit-animation-iteration-count:infinite; 
} 

Sie sollten diese nicht abgeschlossene CSS3-Eigenschaften unter dem Hersteller-Präfixe für die Browser wiederholen Sie unterstützen (zB @-moz-keyframes@-o-keyframes@-webkit-keyframes etc .).