Comment utiliser l'animation CSS3 pour déplacer l'image d'arrière-plan d'un div de haut en bas?

Question

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


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

Mon image de fond est de 200 x 600. Comment puis-je déplacer vers le haut et en bas de la div (je veux que le div reste 200x200, mais l'image ne va plus haut et en bas.)

Je ne vouloir utiliser Javascript pour le faire. (Parce que faire de cette façon de ne pas utiliser le matériel et sera lent.)

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

Vous devez répéter ces propriétés CSS3 non finalisés sous préfixes fournisseurs pour les navigateurs que vous soutenez (par exemple @-moz-keyframes@-o-keyframes@-webkit-keyframes etc .).