僅在鉻/鉻上工作的關鍵幀動畫

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！

因此，在未來的某個時候，關鍵幀可能真的是......幀！

你是生活在未來;）