1

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

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;
}
4

2 回答 2

1

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

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

还

它适用于 Chrome 19！

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

你生活在未来;)

于 2013-04-29T13:08:41.697 回答
0

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

感谢@Morpheus提供另一个stackoverflow链接（http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations），通过它我决定通过图像精灵解决问题，并在该精灵中重新定位（使用CSS 属性- background-position）来选择我想要的图像。background-positionCSS 属性的问题在于，当它通过关键帧应用 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/

于 2013-04-23T05:37:13.663 回答