背景大小的动画在 Safari 上不起作用

Question

我有一个关键帧，可以缓慢放大和缩小通过 css 背景图像渲染的主页背景图像。它在 Chrome 和 Firefox 上运行良好，但在 Safari 上运行不佳。这是我所拥有的。

@keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-webkit-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-ms-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-moz-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-0-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}


.header_container {
  animation: shrink 20s infinite alternate;
  -ms-animation: shrink 20s infinite alternate;
  -o-animation: shrink 20s infinite alternate;
  -moz-animation: shrink 20s infinite alternate;
  -webkit-animation: shrink 20s infinite alternate linear;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0) scale(1.0, 1.0);
  background-attachment: fixed;
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-image: url("https://github.com/luciogutz/");
  background-size: cover;
}

我缺少什么。我有 10 版 safari。

Answer 1

当我遇到同样的问题时，在“样式”中设置最终状态就达到了目的。在您的示例中，这是有效的：

<section class="header_container" style="background-size: 115% 115%;"></section>