CSS关键帧动画野生动物园

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