关键帧动画仅适用于 chrome/chromium

Question

我做了一个简单的三图过渡动画代码。代码可以在这里找到：

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

此代码仅适用于 chrome 和 chromium 浏览器。它也不适用于 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

背景图片不是可以动画的属性 - 您不能对属性进行补间。

相反，尝试使用 position:absolute 将所有图像叠加在一起，然后将所有图像的不透明度设置为 0，除了您想要重复的那个。

还有

它适用于 Chrome 19！

所以在未来的某个时候，关键帧可能真的是……帧！

你生活在未来;)

Answer 2

在对此进行一些研究后，我发现大多数浏览器中 keyframes 不支持 background-image CSS 属性。这一定是因为如果加载较大的图像，动态加载太多图像会导致性能问题。

感谢 @Morpheus 提供另一个 stackoverflow 链接 (http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations)，我决定通过该链接通过 image sprites 和在该精灵中重新定位（使用 CSS 属性 - background-position）以选择我想要的图像。 background-position CSS 属性的问题在于，当它通过关键帧申请 CSS 动画时，重新定位显示图像精灵内的移动。但我想在三帧中快速显示 3 颗星的过渡而不移动。为了实现这一点，我必须使用 6 个关键帧，其中第一颗星的位置设置为 0% 和 33%，第二颗星的位置设置为 34% 和 66%，第三颗星的位置设置为 67% 和 100% .

我创建了一个jsFiddle，它没有相同星星的图像精灵。我无法在网上找到相同星星的精灵，所以我使用了备用星星。它不是一个完美的例子，因为它有草率的动画，但我在我的系统上创建了一个较小的精灵图像 (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/