gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:24:26 26 4
gpt4 key购买 nike

我做了一个简单的三图转场动画代码。代码可以在这里找到:

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

最佳答案

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

相反,尝试使用 position:absolute 将所有图像布置在彼此之上,然后将所有图像的不透明度设置为 0,除了您想要重复的图像。

还有

它适用于 Chrome 19!

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

你生活在未来;)

关于html - 关键帧动画仅适用于 chrome/chromium,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16147026/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com