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

经过一番研究后，我发现在大多数浏览器中background-image内都不支持keyframes CSS属性。必须是因为加载太多图像动态会导致性能问题，如果加载较大的图像。

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

我创建了一个jsFiddle，它没有相同星星的图像精灵。我无法在网上找到相同星星的精灵，因此我使用了替代星星。它不是一个完美的例子，因为它有邋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/

关键帧动画仅适用于铬/铬

2 个答案: