html - 关键帧动画仅适用于 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!

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

你生活在未来;)