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

jsfiddle

Answer 1

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

（更改＆＃39; 1s＆＃39;加快或减慢动画效果）

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

步骤num中的图像和keyFrame 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 */
}

http://jsfiddle.net/p65j4oar/

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

2 个答案: