CSS 关键帧动画 Safari答案

【问题标题】：CSS Keyframe animations safariCSS 关键帧动画 Safari
【发布时间】：2015-06-16 22:20:13
【问题描述】：

我在让关键帧动画在桌面或移动 safari 上运行时遇到问题。

我的代码。

@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  50% {
    transform: scale(1.25, .85) translateY(27px);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

@-webkit-keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  50% {
    transform: scale(1.25, .85) translateY(27px);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.my-animation {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite
}

我也尝试过以手写方式设置动画。在 chrome 中运行良好，但在 safari 桌面或移动设备中无法运行。

【问题讨论】：

在@-webkit-keyframes的情况下使用-webkit-transform

标签： css safari css-animations

【解决方案1】：

您还需要添加 -webkit- 来进行转换，所以它会是这样的：

   transform: scale(1, 1) translateY(0);
   -webkit-transform: scale(1, 1) translateY(0);

【讨论】：

嘎。完全错过了。谢谢:)

【解决方案2】：

在@-webkit-keyframes 的情况下使用-webkit-transform

在这里查看http://caniuse.com/#feat=transforms2d

【讨论】：