Html 在css3中使用精灵图像进行背景转换？

任何人请给我正确的方法来使用

css3

1） 我在bg图像上看到它包含每个精灵的多个

状态

我使用关键帧动画来更新背景的每个位置，但效果不太好

怎么做？如果我没有错的话，请给我指明正确的方向

我的代码：

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


分区背景{
背景：url(https://dl.dropboxusercontent.com/u/10268257/all.png)0个中心；
身高：443px；
宽度：795px；
}
@-webkit关键帧动画EBG{
0%{背景位置：0px中心}
5.882352941176471%{背景位置：795px中心}
11.764705882352942%{背景位置：1590px中心}
17.647058823529413%{背景位置：2385px中心}
23.529411764705884%{背景位置：3180px中心}
29.411764705882355%{背景位置：3975px中心}
35.294117647058826%{背景位置：4770px中心}
41.1764705882353%{背景位置：5565px中心}
47.05882352941177%{背景位置：6360px中心}
52.94117647058824%{背景位置：7155px中心}
58.82352941176471%{背景位置：7950px中心}
64.70588235294119%{背景位置：8745px中心}
70.58823529411765%{背景位置：9540px中心}
76.47058823529412%{背景位置：10335px中心}
82.3529411764706%{背景位置：11130px中心}
88.23529411764707%{背景位置：11925px中心}
2394.11764705882354%{背景位置：12720px中心}
}
div.bg：悬停{
动画名称：animateBg；
动画持续时间：4s；
}

这是因为您需要定义步数，然后将动画作为总长度，它将自己分割

（更改“1s”以加速或减慢动画）


继续：悬停
您需要使用以下步骤

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

step num关键帧中的图像和图像大小100%

关于前缀

@-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 */
}

作为一个信息，我需要要求在某一点上调用一个函数，比如说，第10帧-怎么做？你的意思是想在css动画的“第n”帧上激活javascript函数吗？我不确定你将如何倾听CSS中的变化来触发函数，但似乎有插件可以帮助我倾听CSS中的变化，并在某个背景位置激活函数，但这可能被视为一个单独的问题
@-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 */
}