CSS Keyframe animations safari

问题

I am having an issue getting keyframe animations to work on either desktop or mobile safari.

My Code.

@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.

回答1:

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);

回答2:

use -webkit-transform in case of @-webkit-keyframes

Check here http://caniuse.com/#feat=transforms2d

来源：https://stackoverflow.com/questions/30870215/css-keyframe-animations-safari