css3中精灵图像的背景转换？

Question

任何一个人请给我正确的方法来使用css3来做这件事。

1) bg图像上包含多个states。

我正在使用关键帧动画来更新背景的每个位置，但是它不是很好。

该怎么做呢？如果没有错，请谁显示正确的方式？

我的代码：

<div class="bg"></div>

div.bg {
    background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
    height:443px;
    width:795px;
}

@-webkit-keyframes animateBg {
    0%{ background-position :0px center}
    5.882352941176471%{ background-position :795px center}
    11.764705882352942%{ background-position :1590px center}
    17.647058823529413%{ background-position :2385px center}
    23.529411764705884%{ background-position :3180px center}
    29.411764705882355%{ background-position :3975px center}
    35.294117647058826%{ background-position :4770px center}
    41.1764705882353%{ background-position :5565px center}
    47.05882352941177%{ background-position :6360px center}
    52.94117647058824%{ background-position :7155px center}
    58.82352941176471%{ background-position :7950px center}
    64.70588235294119%{ background-position :8745px center}
    70.58823529411765%{ background-position :9540px center}
    76.47058823529412%{ background-position :10335px center}
    82.3529411764706%{ background-position :11130px center}
    88.23529411764707%{ background-position :11925px center}
    23 94.11764705882354%{ background-position :12720px center}
}

div.bg:hover {
      animation-name: animateBg;  
      animation-duration: 4s;
}

小提琴

Answer 1

这是因为你需要定义步骤的数量，然后把动画作为总长度，它会自己划分它。

(更改“1”以加快或减慢动画速度)

div.bg {
    background : url(https://dl.dropboxusercontent.com/u/10268257/all.png);
    height:443px;
    width:795px;
    -webkit-animation: animateBg 1s steps(16) infinite;
       -moz-animation: animateBg 1s steps(16) infinite;
        -ms-animation: animateBg 1s steps(16) infinite;
         -o-animation: animateBg 1s steps(16) infinite;
            animation: animateBg 1s steps(16) infinite;
    margin:0;
}

@-webkit-keyframes animateBg {
   from { background-position:    0px; }
     to { background-position: -12720px; }
}

@-moz-keyframes animateBg {
       from { background-position:    0px; }
         to { background-position: -12720px; }
}

@-ms-keyframes animateBg {
       from { background-position:    0px; }
         to { background-position: -12720px; }
}

@-o-keyframes animateBg {
       from { background-position:    0px; }
         to { background-position: -12720px; }
}

@keyframes animateBg {
       from { background-position:    0px; }
         to { background-position: -12720px; }
}

http://jsfiddle.net/oe27u6sq/5/

并打开:悬停http://jsfiddle.net/oe27u6sq/6/

Answer 2

您需要使用步骤

div.bg {
    background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
    height:443px;
    width:795px;
}

@-webkit-keyframes animateBg {
    100%{ background-position: 15900px center}
}

div.bg:hover {
  animation: animateBg 2s steps(20) infinite;
}

keyFrame中的图像和图像大小

关于前缀

@-webkit-keyframes animateBg {
    0% {background-position: 0px center}
    100%{ background-position: 15900px center}
}

@keyframes animateBg {
    0% {background-position: 0px center}
    100%{ background-position: 15900px center}
}

div.bg:hover {
  -webkit-animation: animateBg 2s steps(20) infinite; /* Chr, Saf */
          animation: animateBg 2s steps(20) infinite; /* IE >9, Fx >15, Op >12.0 */
}

http://jsfiddle.net/p65j4oar/