Question

我正在尝试使2张背景图片淡入淡出，并且在Chrome / Safari中正常使用时，我对Firefox没有运气。

html {
    height: 100%;
    background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
animation: slides 20s linear infinite;
   -webkit-animation: slides 20s linear infinite;
    -moz-animation: slides 20s linear infinite;
    -o-animation: slides 20s linear infinite;
    -ms-animation: slides 20s linear infinite;
}

@-moz-keyframes slides {
  from {
        -moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");

    -moz-background-size: cover;
    }
60% {
        -moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");

    -moz-background-size: cover;
    }

    to {
        -moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");

    -moz-background-size: cover;
    }
}

@-webkit-keyframes slides {
    from {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
     -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
60% {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
     -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    to {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
      -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
}

@keyframes slides {
 from {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
 background-size: cover;
    }
60% {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  background-size: cover;
    }

    to {
        background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
    background-size: cover;
    }
}

我尝试过将CSS内联并链接到外部样式表，但两者都没有效果。任何指导都将非常感谢。谢谢！

Answer 1

动画背景图片不能跨浏览器工作，所以我建议您使用伪来实现。

＆＃13;

html {
  position: relative;
  height: 100%;
  background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-animation: slides 20s linear infinite;
  -moz-animation: slides 20s linear infinite;
  animation: slides 20s linear infinite;
}

@-webkit-keyframes slides {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes slides {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slides {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

div.container {
  position: relative;           /*  needed on all direct children  */
  background: white;
  font-size: 24px;
  padding: 30px;
}

＆＃13;

<div class="container">
  This content is not affected by the background animation
</div>

＆＃13;

Answer 2

使用autoprefixer，在左侧面板中仅添加未加前缀的代码，为了最大限度地提高浏览器兼容性，请在页面底部的小设置框中添加> 0%。

结果：

@-webkit-keyframes slides {
from {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  background-size: cover;
    }

60% {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  background-size: cover;
   }

to {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  background-size: cover;
   }
}
@-moz-keyframes slides {
from {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -moz-background-size: cover;
       background-size: cover;
    }

60% {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  -moz-background-size: cover;
       background-size: cover;
   }

to {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -moz-background-size: cover;
       background-size: cover;
   }
}
@-o-keyframes slides {
from {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -o-background-size: cover;
     background-size: cover;
    }

60% {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  -o-background-size: cover;
     background-size: cover;
   }

to {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -o-background-size: cover;
     background-size: cover;
   }
}
@keyframes slides {
from {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -moz-background-size: cover;
    -o-background-size: cover;
       background-size: cover;
    }

60% {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
  -moz-background-size: cover;
    -o-background-size: cover;
       background-size: cover;
   }

to {
  background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
  -moz-background-size: cover;
    -o-background-size: cover;
       background-size: cover;
   }
}

CSS关键帧动画在Mozilla中不起作用

2 个答案: