为什么这个动画在 Safari 中不起作用（包括 iOS？）

Question

我什至不确定还能尝试什么。我什至通过了 CSS 验证程序并通过了。适用于 Chrome 和 Firefox。 Safari 没有显示我能分辨的警告或错误。

相关CSS:

.lines {
  width: 32px;
  margin: 20px auto;
}

.line-bar {
  display: inline-block;
  background-color: #f7f7f7;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  -webkit-animation: loading 1s ease-in-out infinite;
  animation: loading 1s ease-in-out infinite;
}

.line-bar:nth-child(1) {

}

.line-bar:nth-child(2) {
  -webkit-animation-delay: 0.09s;
  animation-delay: 0.09s;
}

.line-bar:nth-child(3) {
  -webkit-animation-delay: 0.18s;
  animation-delay: 0.18s;
}

.line-bar:nth-child(4) {
  -webkit-animation-delay: 0.27s;
  animation-delay: 0.27s;
}

@-webkit-keyframes loading {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1, 2.2);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes loading {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1, 2.2);
  }

  40% {
    transform: scale(1);
  }
}

http://jsbin.com/yobatuveji/1

Answer 1

您还需要在 transform 属性

上使用 webkit- 供应商前缀

@-webkit-keyframes loading {
    0% {
        -webkit-transform: scale(1);
    }

    20% {
        -webkit-transform: scale(1, 2.2);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

因为这些关键帧是由 -webkit- 前缀引入的。
通过此更改，动画也可以在 Safari 上按预期运行（刚刚在 v.7.1.2/MacOs 上检查过）。

为什么这个动画在 Safari 中不起作用（包括 iOS？）

Why doesn't this animation work in Safari (including iOS?)

css

safari

animation

ios