CSS 关键帧动画 safari

Question

我在让关键帧动画在桌面或移动 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 桌面版或移动版中不工作。

Answer 1

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

点这里http://caniuse.com/#feat=transforms2d

Answer 2

你还需要添加-webkit-来转换，所以它会像：

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

CSS 关键帧动画 safari

CSS Keyframe animations safari

css

safari

css-animations