连续的CSS转换

Question

有没有办法使用CSS3转换连续动画背景图像的background-position属性？

Answer 1

是的，这是可能的 - DEMO

div 
{ 
    background: url(http://lorempixel.com/100/100); 
    height: 100px; 
    width: 100px; 

    -webkit-animation: slide 2s linear infinite; 
     -moz-animation: slide 2s linear infinite; 
      animation: slide 2s linear infinite; 
} 


@-webkit-keyframes slide 
{ 
    0% {background-position: 0 0;} 
    100% {background-position: 100px 0;} 
}​ 

@-moz-keyframes slide 
{ 
    0% {background-position: 0 0;} 
    100% {background-position: 100px 0;} 
} 

@keyframes slide 
{ 
    0% {background-position: 0 0;} 
    100% {background-position: 100px 0;} 
}