仅在铬/铬上工作的关键帧动画

Question

我已经完成了一个简单的三个图像转换动画代码。该代码可以在这里找到：

http://jsfiddle.net/harshithjv/AF3Jj/

此代码仅适用于Chrome和铬的浏览器。它也不适用于Apple的Safari浏览器。此外，它不适用于任何其他浏览器（我在Firefox和IE9上测试过，未尝试过Opera）。

我想我在animation速记属性上丢失了一些东西。请帮助我。

---

编辑：

我与一些清晰，这是我应该首先做了代码更新。

HTML代码：

<div class="animated_star"></div> 

CSS3代码：

@-moz-keyframes shining_star { 
    from { 
     background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico'); 
    } 
    50% { 
     background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico'); 
    } 
    to { 
     background-image: url('http://findicons.com/icon/download/159919/star/16/ico'); 
    } 
} 

@-webkit-keyframes shining_star { 
    from { 
     background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico'); 
    } 
    50% { 
     background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico'); 
    } 
    100% { 
     background-image: url('http://findicons.com/icon/download/159919/star/16/ico'); 
    } 
} 

@keyframes shining_star { 
    from{ 
     background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico'); 
    } 
    50% { 
     background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico'); 
    } 
    to { 
     background-image: url('http://findicons.com/icon/download/159919/star/16/ico'); 
    } 
} 
.animated_star{ 
    height: 16px; 
    width: 16px; 
    float: left; 
    -webkit-animation: shining_star 1s infinite; /* works only for Chrome/Chromium */ 
    -moz-animation: shining_star 1s infinite; 
    animation: shining_star 1s infinite; 
} 

Answer 1

在此经过一番研究，我估计background-image CSS属性没有在大多数浏览器里面keyframes支持。这必须是因为动态加载太多图像会导致性能问题，如果加载较大的图像。

由于 @Morpheus另一个计算器链接（http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations），通过它，我决定（使用CSS属性 - background-position）图像精灵并重新定位来解决问题是精灵中选择图像我想要它。 background-position CSS属性的问题在于，当它通过关键帧应用CSS动画时，重新定位会显示图像精灵中的移动。但我想要在三个框架内快速显示3星级的过渡而不移动。为了做到这一点，我必须使用6个关键帧，其中第一个星星的位置将设置为0％和33％，第二个星星的位置将设置为34％和66％，第三个星星将设置为67％和100％ 。

我创建了一个jsFiddle，它没有相同星星的图像精灵。我无法在网上找到相同星星的精灵，所以我使用了替代星星。它不是一个完美的例子，因为它有sl animation的动画，但我在我的系统上创建了一个较小的精灵图像（48px x 16px），并且动画看起来不错。

HTML代码：

<div class="animated_star"></div> 

CSS代码：

@-moz-keyframes shining_star { 
    0% { background-position: -135px 0px; } 
    33% { background-position: -135px 0px; } 
    34% { background-position: -135px -260px; } 
    66% { background-position: -135px -260px; } 
    67% { background-position: -270px -260px; } 
    100% { background-position: -270px -260px; } 
} 

@-webkit-keyframes shining_star { 
    0% { background-position: -135px 0px; } 
    33% { background-position: -135px 0px; } 
    34% { background-position: -135px -260px; } 
    66% { background-position: -135px -260px; } 
    67% { background-position: -270px -260px; } 
    100% { background-position: -270px -260px; } 
} 

@keyframes shining_star { 
    0% { background-position: -135px 0px; } 
    33% { background-position: -135px 0px; } 
    34% { background-position: -135px -260px; } 
    66% { background-position: -135px -260px; } 
    67% { background-position: -270px -260px; } 
    100% { background-position: -270px -260px; } 
} 

.animated_star{ 
    height: 130px; 
    width: 135px; 
    float: left; 
    background: transparent url('http://azmind.com/wp-content/uploads/2011/11/social-star-icons.png') no-repeat fixed; 
background-position: 0px -390px; 
    -webkit-animation: shining_star .5s infinite linear; 
    -moz-animation: shining_star .5s infinite linear; 
    animation: shining_star .5s infinite linear; 
} 

的jsFiddle链接：http://jsfiddle.net/harshithjv/7QvSP/2/

Answer 2

背景图像是不能够被动画的属性 - 你不能补间财产。

相反，尝试使用position：absolute将所有图像放在彼此的顶部，然后将所有图像的不透明度设置为0，除了您想要重复使用的图像。

也

它适用于Chrome 19！

因此，在未来的某个时候，关键帧可能真的是......帧！

你是生活在未来;）