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版的野生动物园。

Answer 1

当我遇到相同的问题时，将最终状态设置为“样式”可以解决问题。在您的示例中，此方法有效：

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

背景大小的动画不适用于safari

1 个答案: