背景大小的动画在 safari 上不起作用答案

【问题标题】：Background-size animation doesn't work on safari背景大小的动画在 safari 上不起作用
【发布时间】：2018-02-10 03:18:36
【问题描述】：

我有一个关键帧，可以缓慢放大和缩小通过 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。

【问题讨论】：

您是否在 MAC 或模拟器（如 browserstack）上对此进行了测试？
你能提供一个工作代码sn-p吗？
我在我的 MAC 上试过了
这里是codepen上的代码链接codepen.io/luciogutz/pen/prGxXP

标签： css animation safari zooming css-animations

【解决方案1】：

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

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

【讨论】：