Question

我有一个小动画可以改变 div 的背景图片，但只适用于谷歌浏览器（没有游侠而且没有边缘）。我真的不知道为什么请帮忙。

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

谢谢

Answer 1

您只需要为webkit浏览器（Chrome，Safari，Opera）添加关键帧的前缀：

@-webkit-keyframes backAnimM1
{...

基本上，保留您拥有的内容，然后使用webkit-前缀为webkit浏览器制作副本。

Answer 2

这是我的解决方案，它在动画中看起来像 background-image 并没有被支持。

    <div class="bg" id="item_1"></div>
<div class="bg" id="item_2"></div>
<div class="bg" id="item_3"></div>
<div class="bg" id="item_4"></div>


<style>




.bg{
position: absolute;
width:1000px;
height:200px;;
background-repeat: 'no-repeat';
background-position: 'center';
background-size: cover;    
}

@-webkit-keyframes backAnim1
{
    0%
    {
        opacity: 1;
    }
    23%
    {
        opacity: 1;
    }
    25%
    {
        opacity: 0.5
    }
    26%
    {
        opacity: 0;
    }
    98%
    {
        opacity: 0;
    }
    99%
    {
        opacity: 0,5;
    }
    100%
    {
        opacity: 1;
    }

}

@-webkit-keyframes backAnim2
{
    0%
    {
        opacity: 0;
    }
    24%
    {
        opacity: 0;
    }
    25%
    {
        opacity: 1;
    }
    48%
    {
        opacity: 1;
    }
    49%
    {
        opacity: 0.5;
    }
    50%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 0;
    }
}

@-webkit-keyframes backAnim3
{
    0%
    {
        opacity: 0;
    }
    48%
    {
        opacity: 0;
    }
    49%
    {
        opacity: 0.5;
    }
    50%
    {
        opacity: 1;
    }
    73%
    {
         opacity: 1;
    }
    74%
    {
         opacity: 0.5;
    }
     75%
    {
         opacity: 0;
    }
}

@-webkit-keyframes backAnim4
{
    0%
    {
        opacity: 0;
    }
    73%
    {
        opacity: 0;
    }
    74%
    {
        opacity: 0.5;
    }
    75%
    {
        opacity: 1;
    }
    97%
    {
        opacity: 1;
    }
    98%
    {
        opacity: 0.5;
    }
    99%
    {
        opacity: 0;
    }
}

#item_1
{
opacity: 0.0;
 background-image: url(medias/portada/1.jpg);
 -webkit-animation: backAnim1 18s infinite;
}

#item_2
{
opacity: 0.0;
 background-image: url(medias/portada/2.jpg);
 -webkit-animation: backAnim2 18s infinite;
}

#item_3
{
opacity: 0.0;
 background-image: url(medias/portada/3.jpg);
 -webkit-animation: backAnim3 18s infinite;
}

#item_4
{
opacity: 0.0;
 background-image: url(medias/portada/4.jpg);
 -webkit-animation: backAnim4 18s infinite;
}
</style>

简单的背景改变CSS动画dosent工作

2 个答案: