CSS关键帧动画野生动物园 [英] CSS Keyframe animations safari

问题描述

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

I am having an issue getting keyframe animations to work on either desktop or mobile 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
}

我尝试设置动画也是如此。

I have tried setting the animation longhand as well. Works fine in chrome but not working in safari desktop or mobile.

推荐答案

您还需要添加-webkit-进行转换，这样就可以了：

You need to add -webkit- to transform as well, so it'll be like:

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

这篇关于CSS关键帧动画野生动物园的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！