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

【问题标题】：Why doesn't this animation work in Safari (including iOS?)为什么这个动画在 Safari（包括 iOS）中不起作用？
【发布时间】：2015-01-20 19:33:38
【问题描述】：

我什至不确定还能尝试什么。我什至通过了一个 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

【问题讨论】：

标签： ios css animation safari

【解决方案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 上检查过）。

【讨论】：