连续的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;}
}

​