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

您还需要在webkit-属性

上使用transform供应商前缀

@-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 / MacO上查看）。

为什么这个动画不适用于Safari（包括iOS？）

1 个答案: