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-来进行转换，所以它会像：

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

Answer 2

在@ -webkit-keyframes

的情况下使用-webkit-transform

点击此处http://caniuse.com/#feat=transforms2d

CSS Keyframe动画safari

2 个答案: