Question

我试图制作变换动画：缩放＆＃39; from :: before伪元素的属性，从scale（1）到scale（1.1），这是一个覆盖整个视口的div的动画背景。背景大小设置为＆＃39; cover＆＃39;并在页面加载时正确显示，但是当动画在短暂延迟后启动时，背景会缩小到视口的约50％。一切都在Safari，Chrome和Opera（在Mac上）中按预期工作，但在Firefox（Mac）上，行为如上所述。最重要的是，当将浏览器窗口调整为较小的尺寸时，一切都显示正常，因此要在Firefox中查看问题，浏览器窗口需要至少大于1000px。

以下示例（jsfiddle：http://jsfiddle.net/YuY4U/embedded/result/）。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Animation Test Case</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div>This is a div</div>
  </body>
</html>

的CSS：

html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}
div {
  width: 100%;
  height: 100%;
}
div::after {
  background: url("http://fineartamerica.com/images-simple-print/images-medium/33-landscape-odon-czintos.jpg") top center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  -moz-animation: bg-anim 10s linear 2s infinite;
  -webkit-animation: bg-anim 10s linear 2s infinite;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
@-moz-keyframes bg-anim {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@-webkit-keyframes bg-anim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes bg-anim {
  0% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

我尝试将background-size属性更改为百分比值，但它没有解决问题，并不是我项目的真正解决方案。我也尝试将比例值更改为1和0.9，这样可以正常工作，但背景并没有覆盖整个视口，这对我的情况也是不可接受的。

有关如何解决此问题的任何想法？我是否遗漏了一些明显的东西，或者这可能是浏览器错误或浏览器特定的实现差异甚至？

背景尺寸缩小了覆盖范围。使用关键帧动画进行转换：缩放＆＃39;在Firefox中

0 个答案: