我有一个小动画可以改变 div 的背景图像,但只适用于 google chrome(没有 safari 和边缘)。 我真的不知道为什么请帮助。
@keyframes backAnimM1
{
0%
{
background-image: url(../medias/portada/1.jpg);
background-size: 100% 100%;
}
45%
{
background-image: url(../medias/portada/2.jpg);
background-size: 100% 100%;
}
50%
{
background-image: url(../medias/portada/3.jpg);
background-size: 100% 100%;
}
75%
{
background-image: url../medias/portada/4.jpg);
background-size: 100% 100%;
}
80%
{
background-image: url(../medias/portada/5.jpg);
background-size: 100% 100%;
}
100%
{
background-image: url(../medias/portada/1.jpg);
background-size: 100% 100%;
}
}
还有这个:
#backAnimationMod1
{
animation: backAnimM1 10s infinite;
-webkit-animation:backAnimM1 10s infinite;
-moz-animation:backAnimM1 10s infinite;
-o-animation:backAnimM1 10s infinite;
}
谢谢
最佳答案
您只需为 webkit 浏览器(Chrome、Safari、Opera)的关键帧添加一个前缀:
@-webkit-keyframes backAnimM1
{...
基本上,保留您拥有的内容,然后使用 webkit- 前缀为 webkit 浏览器制作一份副本。
关于html - 简单的背景更改 CSS 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34141147/