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